为什么 mat-option 文本有时不在视图中呈现？

Question

我有一个表格，其中有一个 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>

请帮帮我。

Answer 1

请在您的 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-option 文本有时不在视图中呈现？

Why mat-option text is not rendering in view sometimes?

javascript

angular

angular-material

angular-reactive-forms

angular9