Angular 4選擇不更新ngIf中的值

Question

我有一個ngIf使用選擇中的值來顯示或不顯示另一個選擇，但是當我在第一次選擇中更改值時，ngIf仍使用舊值。 我正在使用的代碼：

 <div class="form-group" > <label>First select</label> <select name="status" class="form-control"[(ngModel)]="status.status"> <option *ngFor="let s of listStatus" [selected]="s.id === status.status" [value]="s.id">{{s.text}}</option> </select> </div> <div class="form-group" *ngIf="status.status === 1"> <label>Second select</label> <select name="blockLevel" class="form-control" [(ngModel)]="status.blockLevel"> <option *ngFor="let s of listBlockedLevel" [selected]="s.id === status.blockLevel" [value]="s.id">{{s.text}}</option> </select> </div> 

在component.ts中，該值已正確更新。 我嘗試使用{{status.status}}顯示該值，但該值沒有變化。

---

解

我使用ChangeDetectorRef解決了我的問題。 在第一次選擇中，我使用了一種方法來更新值

 <select name="status" class="form-control" [ngModel]="status.status" (ngModelChange)="setStatus($event)"> 

在ts組件中，我使用了這個

 public setStatus(event: any) { this.status.status = event; this.ref.detectChanges(); } 

在組件構造函數中，我用它來導入ChangeDetectorRef

 private ref: ChangeDetectorRef 

Answer 1

選擇輸入組件將id從類型數字更改為字符串。

選項1
對於第二個div，請使用以下*ngIf選項之一：

*ngIf="status.status === 1 || status.status === '1'"

要么

*ngIf="status.status == 1"

工作柱塞1

選項2（推薦）
如果您不喜歡select輸入將id更改為字符串的想法，則可以使用[ngValue]而不是[value]保存整個status對象本身，然后使用status.id引用id 。

工作柱塞2