Question

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

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来过滤数据{{1 }}出来this.x

当我尝试执行此操作时，它不会向我抛出任何数据。

undefined

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

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

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

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

第一个组件（父级）与服务进行通信。

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

服务中

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

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

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

我希望将结果显示在屏幕上，并且当我更改父组件列表中的值时，结果列表也会更改，我不会收到错误消息

Answer 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.
});

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

1 个答案: