如何解决 ngFor 用于 Angular 渲染的问题

Question

我对一个简单的 Angular 组件有疑问。 我正在使用响应式表单来插入一个选项，然后通过*ngFor循环查看结果。

• 如果为true ，我想查看图标fa-check 。
• 如果是false的，我只想看not 。

我正在尝试使用对象循环数组，但*ngFor不起作用。 这是代码，这是一个stackblitz项目

模板

<form [formGroup]="selectOptionForm">
    <select class="form-control" id="yesOrNot" name="yesOrNot" formControlName="yesOrNot">
      <option *ngFor="let option of optionArray" [value]="option">
          {{option.label}}
      </option>   
    </select>
    <button  type="button"  (click)="addOption()">ADD</button>

</form>

<div
*ngFor="let option of selectOptionArray; let i = index;">
<div> {{ option.label }}</div>
</div>

TypeScript

import { Component, VERSION } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

selectOptionForm: FormGroup;
selectOptionArray: any[] = [];

optionArray = [
  {
    label: 'yes',
    option: true
  },
   {
    label: 'not',
    option: false
  },
];

constructor(
    private fb: FormBuilder // form FormBuilder
  ) { }

ngOnInit() {
    // dichiaro il form con i contenuti
    this.selectOptionForm = this.fb.group({ 
      yesOrNot: [null]
    });
  }

 addOption(){
   if (this.selectOptionForm.valid) {
      let option = { 
        yesOrNot: this.selectOptionForm.value.yesOrNot,
      };
      this.selectOptionArray.push(option);
      console.log(option)
    }

    this.selectOptionForm.reset();
 }
}

Answer 1

更新模板中的选项值：

<option *ngFor="let option of optionArray" [value]="option.option">
    {{option.label}}
</option>   

更新 addOption 方法中的键名：

let option = { 
    label: this.selectOptionForm.value.yesOrNot,
};