为什么 mat-option 文本有时不在视图中呈现?
Why mat-option text is not rendering in view sometimes?
我有一个表格,其中有一个 mat-select 字段。即使选项与选项列表不匹配,mat-select 字段也会显示值。请参考这个stackblitz example.
在此示例中,在单击按钮时,我添加了一个与 JSON 值不匹配的表单中的值。我实现的同一件事仅适用于初始页面加载,而不适用于另一个按钮单击。 get
函数虽然返回 true
但在视图中,我看不到选项中的文本。
component.ts
xyz = [
{ id: 'a', value: 'a'},
{ id: 'b', value: 'b'},
{ id: 'c', value: 'c'}
];
constructor(private fb: FormBuilder) {}
form = this.fb.group({
field1: ['a']
});
get deletedValue() {
return this.xyz.map(x => x.value).indexOf(this.form.value.field1)<0
&& this.form.value.field1 !== '';
}
action() {
this.form.patchValue({
field1: 'z'
});
}
component.html
<form [formGroup]="form">
<select formControlName="field1">
<option *ngIf="deletedValue" class="d-none" [value]="form.get('field1').value">
{{ form.get('field1').value }}</option>
<option *ngFor="let i of xyz" [value]="i.value">{{i.value}}</option>
</select>
</form>
<br>
<button (click)="action()">Click</button>
请帮帮我。
请在您的 component.ts 操作函数中添加此代码
action() {
this.form.patchValue({
field1: 'z'
});
this.xyz.push({id: this.form.controls['field1'].value, value: this.form.controls['field1'].value})
}
然后它将在您的下拉选项中添加 'z' 值。
我有一个表格,其中有一个 mat-select 字段。即使选项与选项列表不匹配,mat-select 字段也会显示值。请参考这个stackblitz example.
在此示例中,在单击按钮时,我添加了一个与 JSON 值不匹配的表单中的值。我实现的同一件事仅适用于初始页面加载,而不适用于另一个按钮单击。 get
函数虽然返回 true
但在视图中,我看不到选项中的文本。
component.ts
xyz = [
{ id: 'a', value: 'a'},
{ id: 'b', value: 'b'},
{ id: 'c', value: 'c'}
];
constructor(private fb: FormBuilder) {}
form = this.fb.group({
field1: ['a']
});
get deletedValue() {
return this.xyz.map(x => x.value).indexOf(this.form.value.field1)<0
&& this.form.value.field1 !== '';
}
action() {
this.form.patchValue({
field1: 'z'
});
}
component.html
<form [formGroup]="form">
<select formControlName="field1">
<option *ngIf="deletedValue" class="d-none" [value]="form.get('field1').value">
{{ form.get('field1').value }}</option>
<option *ngFor="let i of xyz" [value]="i.value">{{i.value}}</option>
</select>
</form>
<br>
<button (click)="action()">Click</button>
请帮帮我。
请在您的 component.ts 操作函数中添加此代码
action() {
this.form.patchValue({
field1: 'z'
});
this.xyz.push({id: this.form.controls['field1'].value, value: this.form.controls['field1'].value})
}
然后它将在您的下拉选项中添加 'z' 值。