การใช้อาร์เรย์จากวัตถุที่สังเกตได้ด้วย ngFor และ Async Pipe Angular 2


93

ฉันพยายามทำความเข้าใจวิธีใช้ Observables ใน Angular 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));
    }
}

BehaviorSubject นี้ได้รับการผลักดันค่าใหม่จากบริการอื่น:

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

ข้อความแสดงข้อผิดพลาดที่แท้จริงคืออะไร?
GünterZöchbauer

แก้ไขเพื่อเพิ่มข้อผิดพลาด
C. Kearns

ด้วย angular-rc1 ล่าสุดไวยากรณ์คือ*ngFor="let appointment of _nextFourAppointments.availabilities | async">
Jagannath

นี่เป็นความจริง แต่ไม่ก่อให้เกิดข้อผิดพลาด เพียงแค่ส่งเสียงเตือน
C. Kearns

3
ฉันเชื่อว่ามีการพิมพ์ผิด ข้อผิดพลาดบอกว่าavailabiltiesควรจะมีavailabilities
Ivan Sivak

คำตอบ:


154

นี่คือตัวอย่าง

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

ฟังก์ชัน get ของฉันส่งคืนหัวเรื่องแม้ว่า: 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'ฉันจะเปลี่ยนวัตถุให้เป็นวัตถุที่สังเกตได้ได้อย่างไร
C. Kearns

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?
C. Kearns

มันเป็นสิ่งที่สังเกตได้! ฉันแค่ต้องสมัครสมาชิก!
C. Kearns

ฉันมีปัญหาเพิ่มเติมเกี่ยวกับการบูรณาการวิชา นี่คือ StackBlitz โดยใช้สิ่งที่สังเกตได้และวัตถุ: stackblitz.com/edit/subject-as-observable-list-example
IceWarrior353

12

ใครเคยสะดุดโพสต์นี้

ฉันเชื่อว่าเป็นวิธีที่ถูกต้อง:

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

1

ฉันคิดว่าสิ่งที่คุณกำลังมองหาคือสิ่งนี้

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


1

หากคุณไม่มีอาร์เรย์ แต่พยายามใช้สิ่งที่สังเกตได้ของคุณเช่นอาร์เรย์แม้ว่าจะเป็นสตรีมของอ็อบเจ็กต์สิ่งนี้จะไม่ได้ผล ฉันแสดงวิธีแก้ไขด้านล่างนี้โดยสมมติว่าคุณสนใจเฉพาะการเพิ่มวัตถุในสิ่งที่สังเกตได้เท่านั้นไม่ใช่การลบ

หากคุณกำลังพยายามใช้ที่สังเกตได้ซึ่งมีแหล่งที่มาเป็นประเภท BehaviorSubject ให้เปลี่ยนเป็น ReplaySubject จากนั้นในส่วนประกอบของคุณให้สมัครสมาชิกดังนี้:

ส่วนประกอบ

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

Html

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

แทนที่จะใช้scanโอเปอเรเตอร์คุณสามารถใช้.pipe(toArray())
MotKohn

หลุมพรางอีกเมื่อมีการสร้างของคุณเองไม่ได้เรียกร้องSubject complete()เครื่องสะสมจะไม่ทำงาน
MotKohn
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.