एनफोर और एसिंक्स पाइप कोणीय 2 के साथ ऑब्जर्वेबल ऑब्जेक्ट से एक सरणी का उपयोग करना

Question

मैं यह समझने की कोशिश कर रहा हूं कि कोणीय 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
}

मैं async पाइप और * ngFor के साथ एक अवलोकनीय वस्तु से अतुल्यकालिक रूप से एक सरणी कैसे प्रदर्शित कर सकता हूं? त्रुटि संदेश मुझे मिलता है:

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

Comments

वास्तविक त्रुटि संदेश क्या है?

— गुंटर ज़ोचाउर

त्रुटि जोड़ने के लिए संपादित

— सी। किर्न्स

नवीनतम कोणीय-आरसी 1 के साथ वाक्य रचना है*ngFor="let appointment of _nextFourAppointments.availabilities | async">

— जगन्नाथ

यह सच है, लेकिन यह त्रुटि पैदा नहीं कर रहा है। यह बस एक चेतावनी फेंकता है।

— सी। किर्न्स

मेरा मानना ​​है कि कहीं एक टाइपो है। त्रुटि कहती है availabiltiesजबकि वहाँ होना चाहिएavailabilities

— इवान शिव

Answer 1

यहाँ एक उदाहरण है

// 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>

Comments

मेरा प्राप्त फ़ंक्शन हालांकि किसी विषय को लौटा रहा है: public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return this._appointmentChoices.map(object=>object.availabilities).subscribe() } नियंत्रक में, जब मैं इसे बराबर सेट करता हूं, तो मुझे त्रुटि मिलती है: browser_adapter.js:77Error: Invalid argument '[object Object]' for pipe 'AsyncPipe'मैं विषय को एक अवलोकन में कैसे बदलूं?

— सी। किर्न्स

public _appointmentChoices: Subject<any> = new Subject() getAppointments() { return (this._appointmentChoices.map(object=>object.availabilities).asObservable()) } } यह मुझे त्रुटि देता है: property asObservable does not exist on type observableलेकिन _appointmentChoices एक है Subject?

— सी। किर्न्स

यह पहले से ही एक अवलोकन योग्य था! मुझे बस इसकी सदस्यता की आवश्यकता थी!

— सी। किर्न्स

मुझे विषयों को एकीकृत करने के साथ एक अतिरिक्त समस्या थी। यहाँ वेधशालाओं और विषयों का उपयोग करके एक स्टैकब्लिट्ज़ है: stackblitz.com/edit/subject-as-observable-list-example

— IceWarrior353

Answer 2

जो कभी इस पद पर भी ठोकर खाते हैं।

मेरा मानना ​​है कि सही तरीका है:

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

Answer 3

मुझे लगता है कि यह किस उर की तलाश है

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

Answer 4

यदि आपके पास कोई सरणी नहीं है, लेकिन आप वस्तुओं की एक धारा होते हुए भी अपने अवलोकन योग्य सारणी का उपयोग करने का प्रयास कर रहे हैं, तो यह मूल रूप से काम नहीं करेगा। मैं दिखाता हूं कि नीचे दी गई इस बात को ठीक करने के लिए कि आप केवल वस्तुओं को देखने योग्य बनाने की परवाह करते हैं, उन्हें हटाते नहीं हैं।

यदि आप एक अवलोकनीय का उपयोग करने का प्रयास कर रहे हैं, जिसका स्रोत BehaviorSubject का है, तो इसे ReplaySubject में बदलें फिर अपने घटक में इसे इस तरह से सब्सक्राइब करें:

अंग

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

एचटीएमएल

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

Comments

scanऑपरेटर के बजाय आप उपयोग कर सकते हैं.pipe(toArray())

— मोटोकॉन

अपनी खुद Subjectकी कॉल करते समय एक और नुकसान नहीं है complete()। संचायक कभी नहीं चलेगा।

— मोटोकॉन