如何使用可变数量的输入字段绑定到表单？

Question

我有一个表格要求会员提供主题。如果您开始输入函数，则会查找以前的主题，以便通过将输入绑定到querytopic来添加建议。如果有人想要他可以添加更多主题。但是，新输入字段将绑定到与先前输入相同的查询。因此所有输入字段都将获得相同的值。有没有办法克服这个问题。

<div formArrayName="topics" class="form horizontal">
      <div *ngFor="let topic of topics.controls; let i=index [formGroupName]="i">
          <div class="form-group">
              <input type ="hidden" class="form-control" formControlName="id" value={{i}}>
          </div>
            <div class="form-group row">
              <label for="topic" class="col-lg-2 mr-2">Topic {{i+1}}:</label>
              <div class="col-lg-8">
                <div class="input-group input-group-sm">
                  <input [(ngModel)]=querytopic (keyup)=filtertopic($event) (blur)=handleBlur() class="form-control form-control-sm" formControlName="topic" id="topic">
                  <span class="input-group-btn">
                    <button class="btn btn-primary" (click)="addTopic()" >+</button>
                  </span>
                  <span class="input-group-btn">
                    <button class="btn btn-danger" (click)="removeTopic(i)" type="button">x</button>
                  </span>
                </div>
              </div>
            </div>
          </div><!--Questions bij de recomendation-->
      </div>

添加主题的功能：

 addTopic () {
    this.topics.push(this.fb.group(new Topic()));
  }

查询功能在匹配值的主题列表中查找：

filtertopic(event: any) {
    if (this.querytopic !== "") {
      this.onderdeel = "topic";
        this.filteredList = this.Topics.filter(function (el) {
            return el.toLowerCase().indexOf(this.querytopic.toLowerCase()) > -1;
        }.bind(this));
    } else {
        this.filteredList = [];
    }
}