Question

我在输入字段中输入一些值后，需要刷新图表组件。我不知道如何做到这一点

这是我的start.component.hmtl

<input [(ngModel)]="inputValue"/>
<select  (change)="selectedItem($event)">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

我通过ngMode指令收到的数据我传递给图表组件，如下所示：

  <app-chart [optionsIncome]="options"  [inputValue]="inputValue"></app-chart>

但我的问题是在我输入输入字段后，我需要重新渲染chart.component模板。随着下拉字段，它工作正常。如何使用我传递给其他组件并通过BehaviourSubject订阅的ngModel指令来执行此操作。

这是一个例子： Example

Answer 1

你的例子在更改下拉字段时无法工作，我猜你想在输入和下拉值改变后使用相同的逻辑，你可以使用ngModelChange函数来传递你的inputValue

export class StartComponent implements OnInit {

  selectedItem(data) {
    if (data) {
      this.data.push(data);
      this.reload();
    }
    ...
  }

  changeByInput(inputValue) {
    this.selectedItem(inputValue);
  }

}

// start.component.html
<div><input type="text" [(ngModel)]="inputValue" (ngModelChange)="changeByInput($event)" /></div>

在订阅事件发射器中？

1 个答案: