এনজিফোর্ড এবং অ্যাসিঙ্ক পাইপ অ্যাঙ্গুলার 2 সহ পর্যবেক্ষণযোগ্য অবজেক্ট থেকে একটি অ্যারে ব্যবহার করা

Question 1

আমি কৌনিক 2 এ পর্যবেক্ষণগুলি কীভাবে ব্যবহার করব তা বোঝার চেষ্টা করছি আমার এই পরিষেবাটি রয়েছে:

import {Injectable, EventEmitter, ViewChild} from '@angular/core';
import {Observable} from "rxjs/Observable";
import {Subject} from "rxjs/Subject";
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from './availabilities-interface'

@Injectable()
export class AppointmentChoiceStore {
    public _appointmentChoices: BehaviorSubject<Availabilities> = new BehaviorSubject<Availabilities>({"availabilities": [''], "length": 0})

    constructor() {}

    getAppointments() {
        return this.asObservable(this._appointmentChoices)
    }
    asObservable(subject: Subject<any>) {
        return new Observable(fn => subject.subscribe(fn));
    }
}

এই আচরণগত বিষয়টিকে অন্য পরিষেবা থেকে নতুন মান হিসাবে ঠেলে দেওয়া হয়েছে:

that._appointmentChoiceStore._appointmentChoices.next(parseObject)

আমি যে উপাদানটি এটিতে প্রদর্শন করতে চাইছি তাতে পর্যবেক্ষণযোগ্য আকারে এটিতে সদস্যতা নিয়েছি:

import {Component, OnInit, AfterViewInit} from '@angular/core'
import {AppointmentChoiceStore} from '../shared/appointment-choice-service'
import {Observable} from 'rxjs/Observable'
import {Subject} from 'rxjs/Subject'
import {BehaviorSubject} from "rxjs/Rx";
import {Availabilities} from '../shared/availabilities-interface'


declare const moment: any

@Component({
    selector: 'my-appointment-choice',
    template: require('./appointmentchoice-template.html'),
    styles: [require('./appointmentchoice-style.css')],
    pipes: [CustomPipe]
})

export class AppointmentChoiceComponent implements OnInit, AfterViewInit {
    private _nextFourAppointments: Observable<string[]>

    constructor(private _appointmentChoiceStore: AppointmentChoiceStore) {
        this._appointmentChoiceStore.getAppointments().subscribe(function(value) {
            this._nextFourAppointments = value
        })
    }
}

এবং দৃশ্যে যেমন প্রদর্শন করার চেষ্টা করা হয়েছে:

  <li *ngFor="#appointment of _nextFourAppointments.availabilities | async">
         <div class="text-left appointment-flex">{{appointment | date: 'EEE' | uppercase}}

তবে, উপলভ্যতাগুলি এখনও পর্যবেক্ষণযোগ্য বস্তুর সম্পত্তি নয় তাই এটি ত্রুটিযুক্ত হয়ে যায়, এমনকি ভেবেছিল যে আমি এটিকে উপলভ্যতা ইন্টারফেসে এটি সংজ্ঞায়িত করেছি:

export interface Availabilities {
  "availabilities": string[],
  "length": number
}

অ্যাসিঙ্ক পাইপ এবং * এনজিফোর্ডের সাথে পর্যবেক্ষণযোগ্য অবজেক্ট থেকে আমি কীভাবে অ্যাসিঙ্ক্রোনালি অ্যারে প্রদর্শন করতে পারি? আমার কাছে পাওয়া ত্রুটি বার্তাটি হ'ল:

browser_adapter.js:77 ORIGINAL EXCEPTION: TypeError: Cannot read property 'availabilties' of undefined

Question 2

এখানে একটি উদাহরণ

// in the service
getVehicles(){
    return Observable.interval(2200).map(i=> [{name: 'car 1'},{name: 'car 2'}])
}

// in the controller
vehicles: Observable<Array<any>>
ngOnInit() {
    this.vehicles = this._vehicleService.getVehicles();
}

// in template
<div *ngFor='let vehicle of vehicles | async'>
    {{vehicle.name}}
</div>

Question 3

যিনি কখনও এই পোস্টে হোঁচট খায়।

আমি বিশ্বাস করি সঠিক উপায়:

  <div *ngFor="let appointment of (_nextFourAppointments | async).availabilities;"> 
    <div>{{ appointment }}</div>
  </div>

Question 4

আমি মনে করি আপনি যা খুঁজছেন এটি এটি

<article *ngFor="let news of (news$ | async)?.articles">
<h4 class="head">{{news.title}}</h4>
<div class="desc"> {{news.description}}</div>
<footer>
    {{news.author}}
</footer>

Question 5

যদি আপনার কাছে অ্যারে না থাকে তবে আপনি নিজের পর্যবেক্ষণযোগ্যকে অ্যারের মতো ব্যবহার করার চেষ্টা করছেন যদিও এটি বস্তুর স্রোত, এটি স্থানীয়ভাবে কাজ করবে না। আমি কেবল নীচে পর্যবেক্ষণযোগ্য অবজেক্টগুলিকে যুক্ত করার বিষয়ে যত্ন নিরূপণ করে ধরে নিলাম এটি কীভাবে ঠিক করবেন তা আমি এগুলি দেখছি না show

আপনি যদি এমন কোনও পর্যবেক্ষণযোগ্য ব্যবহারের চেষ্টা করছেন যার উত্স আচরণীয় সাবজেক্ট টাইপ করা হয়, তবে এটি রিপ্লেসউবজেক্টে পরিবর্তন করুন তবে আপনার উপাদানটিতে এটির জন্য সাবস্ক্রাইব করুন:

উপাদান

this.messages$ = this.chatService.messages$.pipe(scan((acc, val) => [...acc, val], []));

এইচটিএমএল

<div class="message-list" *ngFor="let item of messages$ | async">