我如何解决 Angular 渲染的 ngFor 问题

Question

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

如果true我想看图标fa-check。
如果false我只想看not.

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

模板

<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,
};

我如何解决 Angular 渲染的 ngFor 问题

How can I solve a problem with ngFor for Angular rendering

javascript

angular

typescript

ngfor