Question

我尝试将可观察数据中的数据传递给组件。

我无法将数据放入打字稿中的数组中，我仍然得到Observable对象和类型为负数的消息。但是，在HTML中，循环正确地打印出来的数据。

服务：

@Injectable()
export class DataService {

    private _dataListSource: BehaviorSubject<Data[]> = new BehaviorSubject<Data[]>([]);


    constructor(private http: HttpClient) {
    }

    getDataList(): Observable<any> {
        return this.http.get<Data[]>('/rest/data/lastDatas').map(res => {
            this._dataListSource.next(res);
            console.log(res);
        });
    }

    subscribeToDatas(): Observable<Data[]> {
        return this._dataListSource.asObservable().distinctUntilChanged();
    }

    getData(): Observable<Data[]> {
        return this.http.get<Data[]>('/rest/data/lastDatas');
    }
}

TypeScript类：

export class DataComponent implements OnInit {

    dataStatuses: Data[];

    public dataList$: Observable<Data[]>;

    constructor(public dataService: DataService) {
    }

    ngOnInit() {
        this.dataList$ = this.dataService.subscribeToDatas();
        this.dataService.getDataList().subscribe();
        console.log("Informacja ", this.dataList$);
    }
}

HTML：

<div *ngIf="dataList$ | async; let dataList; ">
  <div *ngFor="let data of dataList">
    {{data.id}}
  </div>
</div>

Answer 1

您的dataList$会返回Observable，这是正确的。 html仍然有效，因为您使用的是codelabs，它会自动为您执行“订阅”部分。

如果您想查看dataList$返回的内容，只需订阅：

this.dataList$.subscribe(data=>{
    console.log("data from dataList! ",data);
})

Angular5将数据从observable获取到组件

1 个答案: