1

每当我使用 ngOnChanges() 方法更新组件 @Input 属性时，我都会尝试刷新角度组件，但它不起作用。

场景如下：

我有一个名为 all-tasks.component 的组件，其模板定义如下：

<div class="row">
<div class="col-sm-4">
    <app-pie-chart
        (chartSelected)="filterByChartSelection($event)"></app-pie-chart>
</div>
<div class="col-sm-8">
    <h4> All Tasks </h4>
    <app-tasks [chartInput]="piechart_serviceInput"></app-tasks>
</div>

app-pie-chart组件是一个饼图组件，而app-tasks是一个托管 HTML 表格的组件，其中一些数据来自服务。

现在，如果用户在饼图的任何标签上进行选择，我希望右侧的表格用仅包含饼图中所选标签值的行进行刷新。

为此，我已经能够成功地从app-pie-chart组件发出 @Output 事件并在all-tasks组件上接收它。

但是，我无法将发出的值设置为所有任务组件的 @Input 元素以刷新表。我使用了 ngOnChange() 并尝试放置一个简单的 console.log 语句，但即使这样也不会打印。

从应用程序饼图中发出事件的代码

@Output() chartSelected = new EventEmitter<{serviceName: string, label: string}>();
this.chartSelected.emit({serviceName: 'filterByApp', label: this.p_data.labels[event.element._index]});

接收输出事件并将其设置为 app-tasks 组件中的@Input 属性的代码

all-tasks.component.ts 文件中的代码

piechart_serviceInput: Piechart[] = [];
filterByChartSelection(selectedChartData: {serviceName: string, label: string} ) {

this.piechart_serviceInput.pop();

this.piechart_serviceInput.push({
  serviceName: selectedChartData.serviceName,
  label: selectedChartData.label
});

}

在上面的代码中，我们已经通过 all-tasks.component.ts 文件将输出事件中检索到的值设置为在app-tasks组件的 Input 参数中发送

app-tasks 组件中 Input 参数的定义及其 ngOnChange 定义如下：

 @Input('chartInput') chartInput: {serviceName: string, label: string};

ngOnChanges(changes: SimpleChanges) {
console.log('ngOnChanges was called!');
this.tasks = this.service.getTasksByLabelAndServiceName(this.chartInput.serviceName, this.chartInput.label);
console.log('Tasks component data: ' + this.tasks);

}

我已确保通过 console.log 语句正确发出和接收输出事件。但是，我发现问题是在 @Input 参数的设置中。

谁能指导我？

是不是因为我们试图在 app-tasks 组件中设置 Input 属性，该组件是一个简单的 javascript 对象，具有来自 all-tasks.component.ts 文件的 Array 类型对象？

4

0 回答 0