javascript - Angular : ngOnChanges is not detecting changes?

Question

我在一个组件中有一个下拉列表。每次下拉列表的值发生变化时，我都会尝试检测另一个组件中的更改的值。但我有一个奇怪的问题。有时，当我更改下拉列表的值时，它会触发 ngOnChanges，有时则不会。我不知道为什么。

这是我的代码:

AppComp

html

    <td width="20%" class="cursor">
      <select (change)="changedvalue($event)" class="form-control" name="level">
        <option  hidden selected> -- Select options -- </option>
        <option>Level 1</option>
        <option>Level 2</option>
      </select>
    </td>

   <td class="cursor">
     <app-other-comp [group]="group"></app-other-comp>
   </td>

ts

group: string;

changedvalue(event: Event) {
   const value = (<HTMLSelectElement>event.target).value;
   this.group = value;
   console.log('From AppComp' + this.group);
  }

其他组件

ts

@Input() group: string;

ngOnChanges() {
    console.log('Changed : ' + this.group);
  }

就像在浏览器控制台中一样，您可以看到有时它检测到更改，有时则没有。

未检测到更改:

检测到更改:

Answer 1

当输入模糊时调用更改函数。您可以像这样使用 ngModel 和 ngModelChange 函数:

<td width="20%" class="cursor">
  <select (ngModelChange)="changedvalue($event)" [(ngModel)]="value"  class="form-control" name="level">
    <option  hidden selected> -- Select options -- </option>
    <option>Level 1</option>
    <option>Level 2</option>
  </select>
</td>

<td class="cursor">
 <app-other-comp [group]="group"></app-other-comp>
</td>