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

Question

I have a problem with a simple Angular component. I'm using a reactive form to insert an option then I loop by *ngFor to see the results.

• If true I want to see icon fa-check .
• If false I want to see only not .

I'm trying to loop an array with objects but the *ngFor does not work. This is the code and this is a stackblitz-project

Template

<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

Update option value in template:

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

Update key name in addOption method:

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