angular - 每当从下拉菜单中选择特定选项时如何更改段落？

Question

标题模糊，但每当从下拉菜单中选择 Dr.name 时，我想更改 waiting_time 变量，但由于 Dr 超出范围，我无法执行此操作。

<div class="container well">
    <div class="col-lg-2">
        <select class="form-control" [(ngModel)]="selectedDr" name="selectedDr">
            <option *ngFor="let Dr of configDr">{{ Dr.name }}</option>
        </select>
    </div>
    <div class="col-lg-10">
        <p>Estimated waiting time is: {{ waiting_time }} minutes</p>
    </div>
</div>

showConfig() {
    this.EmployeeData.getConfig()
      .subscribe(data => {
        this.configDr = data as Config [];
      });
  }

Answer 1

您可以使用 change 事件来实现此目的:

<select class="form-control" (change)="modelChanged($event)" [(ngModel)]="selectedDr" name="selectedDr">
     <option *ngFor="let Dr of configDr" value="{{Dr.name}}">{{ Dr.name }}</option>
</select>

在你的 component.ts 文件中:

public modelChanged(event){
   let value = event.source.value; //this line is used incase you are not using ngModel
   this.waiting_time='your desired value';
}