Question

我有一个ngIf使用select中的值来显示或不显示另一个select，但是当我在first select中更改值时，ngIf仍然使用旧值。我使用的代码：

＆＃13;

<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>

＆＃13;

在component.ts中，值正确更新。我尝试使用{{status.status}}显示该值，且值不会发生变化。

解决方案

我使用ChangeDetectorRef解决了我的问题。在第一个选择中，我使用了一种方法来更新值

＆＃13;

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

＆＃13;

在ts组件中我使用了这个

＆＃13;

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

＆＃13;

在组件构造函数中，我用它来导入ChangeDetectorRef

＆＃13;

private ref: ChangeDetectorRef

＆＃13;

Answer 1

select输入组件将id从类型编号更改为字符串。

选项1
对于第二个div，请使用以下*ngIf选项之一：

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

或

*ngIf="status.status == 1"

Working Plunker 1

选项2（推荐）
如果您不喜欢选择输入将id更改为字符串的想法，则可以使用[ngValue]代替[value]来保存整个status对象本身，然后使用id引用status.id。

Working Plunker 2

Angular 4选择不更新ngIf中的值

1 个答案: