如何使用数据绑定从订阅获取数据并显示到屏幕视图答案

【问题标题】：how get data from subscribe and display to screen view using data binding如何使用数据绑定从订阅获取数据并显示到屏幕视图
【发布时间】：2019-07-14 05:21:20
【问题描述】：

首先我想做或尝试做的是使用带有选项的菜单栏并根据该值使用值进行过滤，然后是我如何做。

component 1 这里是菜单栏，component 2 是我要过滤的列表，我使用服务进行组件之间的通信，它运行良好。问题是我试图从component 1 获取的数据在订阅函数之外是未定义的，我不能用它来过滤列表。

this.communicationService.communication $ .subscribe ((data) => {
    data === this.x;
    console.log (data) // throw the expected data.
});

这就是我从component 1 获取数据的方式，现在当我将控制台数据提供给完美数据时，组件和所有内容之间存在通信，但是当我想使用this.x 过滤数据时this.x 出现@987654329 @

当我尝试这样做时，它不会向我抛出任何数据。

this.result = this.listingAFilter.filter ((f) => {
    return f.opcion === this.x
});

我什至尝试过这样做，但没有结果

this.communicationService.communication $ .subcribe (data => {
    this.result = this.listingAFilter.filter (f => {
        return f.opcion === data;
    })
})

请提供任何帮助，感谢您为我解决此问题提供的帮助。

我正在使用 Angular 6，我在一个组件中有一个列表，并希望根据第一个列表的结果过滤另一个组件上的另一个列表。我正在使用服务在组件之间进行通信。

第一个组件（父级）与服务通信..

    commun(value) {
        this.cummunicationService.cummFunc(value);
    }

服务中

    commFunc(commun: any) {
        this.Communication.next(commun);
        console.log(commun);
      }

第二个组件（子组件）接收消息并尝试根据消息过滤列表并打印在屏幕视图中，实际上我得到了一个空列表

this.communicationService.communication$.subscribe(
    data => this.result = this.list.filter( function(mo) {
        return mo.parentId === data.toString();
    })
);

我希望将结果扔到屏幕上，当我更改父组件中列表上的值时，结果列表发生更改，我没有收到错误消息

【问题讨论】：

您介意在stackblitz.com 上创建一个演示代码吗？答案需要更好的代码可视化而不是小块。

标签： angular typescript filter subscribe

【解决方案1】：

主要问题是您没有正确地将数据变量分配给“x”。

而不是这个：

this.communicationService.communication$.subscribe((data) => {
    data === this.x; // Here you are comparing to variables
    console.log (data) // throw the expected data.
});

这样做：

this.communicationService.communication$.subscribe((data) => {
    this.x = data; // Now you are assigning data to x
    console.log (data); // throw the expected data.
});

【讨论】：