按下按钮后动态添加新文本框不起作用 - Angular

Question

我正在创建一个编辑员工表单，并且有一个按钮 Add new skill 需要创建新的文本框来添加技能。

但是当我点击Add new skill 时，它并没有添加任何新的文本框并在控制台中显示这些详细信息。

我的打字稿代码：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, NgForm, Validators } from '@angular/forms';
import { EmployeeDepartment } from '../employee-department-class';


@Component({
  selector: 'app-edit-emp-form-builder',
  templateUrl: './edit-emp-form-builder.component.html',
  styleUrls: ['./edit-emp-form-builder.component.css']
})
export class EditEmpFormBuilderComponent implements OnInit {

  /**
   * Using some default values and may be different from other component
   */


  department = [
    new EmployeeDepartment(1, 'Payroll'),
    new EmployeeDepartment(2, 'Internal'),
    new EmployeeDepartment(3, 'HR')
  ]

  skills: any = []
  employeeDetails = this.fb.group({
    employeeName: ['', [Validators.required, Validators.minLength(4), Validators.maxLength(20)]],
    department: [null, [Validators.required]],
    skills: this.fb.array([
      this.fb.control('')
    ])
  });
  constructor(private fb: FormBuilder) {

  }

  get skill() {
    return this.employeeDetails.get('skills') as FormArray;
  }

  addSkill() {
    this.skills.push(this.fb.control(''));
  }

  onSubmit(f: NgForm) {
    console.log(f);
  }

  ngOnInit(): void {
  }

}

我的技能 HTML 代码

 <div formArrayName="skills">
    <h3>Skill</h3>
    <button (click)="addSkill()">Add new skill</button>
    <div *ngFor="let s of skill.controls; let i = index">
      <label>Skill:
        <input type="text" [formControlName]="i">
      </label>
    </div>

  </div>

Answer 1

从您的代码中删除变量 skills: any = []。
将get skill() 重命名为get skills()