how to update a formarray in angular 2

In a small form containt also a formarray I want to update the inputfields usinf lists that are generated based on userinput. The user can select then a value from a filteredlist based on previous input. I am able to update an inputfield of a formcontrol after the user selects an option in my filtered list, but cannot get it to work in a formarray, does anybody know a solution?

Here is the HTML part

<div class="form-group row">
        <div class="col-sm-2">
          <h5><span class=" ">Table</span></h5>
        </div>
        <div class="col-sm-6">
          <input class="form-control form-control-sm" formControlName="table" id="table" (keyup)=filterTable()>
        </div>
      </div>

      <div  *ngIf="filteredtableList.length > 0">
        <div class="suggestions" *ngFor="let item of filteredtableList;let idx = index" (mouseover)="selectedIdx = idx">
          <ul  >
            <li>
              <a (click)="selecttable(item)">{{item}}</a>
            </li>
          </ul>
        </div>
      </div>

      <div class="form-group row">
        <div class="col-sm-2">
          <h5><span class=" ">Class</span></h5>
        </div>
        <div class="col-sm-2">
          <input class="form-control form-control-sm" formControlName="class">
        </div>
        <div class="col-sm-2">
          <h5><span class=" ">Level of Evidence</span></h5>
        </div>
        <div class="col-sm-2">
          <input class="form-control form-control-sm" formControlName="loe">
        </div>
      </div>


     <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">
            <div class="col-sm-2">
              <h5><span class=" ">Topic {{i+1}}:</span></h5>
            </div>
            <div class="col-sm-6">
              <div class="input-group">
                <input class="form-control form-control-sm" formControlName="topic" id="topic" (keyup)="filterTopic(i)">
                <span class="input-group-btn">
                  <button class="btn btn-primary" (click)="addTopic()" type="button">+</button>
                </span>
                <span class="input-group-btn">
                  <button class="btn btn-danger" (click)="removeTopic(i)" type="button">X</button>
                </span>
              </div>
            </div>
          </div>
        </div><!--topics bij de recomendation-->
    </div>

    <div  *ngIf="filteredtopicList.length > 0">
      <div class="suggestions" *ngFor="let item of filteredtopicList;let idx = index" (mouseover)="selectedIdx = idx">
        <ul  >
          <li>
            <a (click)="selecttopic(item)">{{item}}</a>
          </li>
        </ul>
      </div>
    </div>

and this is the corresponding typescript.

filterTable () {
      const query = this.recommendationForm.get('table').value;
      const guideline = this.recommendationForm.get('guideline').value;
      if (guideline !== "") {
        this.Tables.length = 0; 
        let tableprimcounter = 0;
        do {
          if (this.Tableprimarys[tableprimcounter].guideline == guideline) {
            if (this.Tables.indexOf(this.Tableprimarys[tableprimcounter].table) < 0) {
              this.Tables.push (this.Tableprimarys[tableprimcounter].table)
            }
          }
          tableprimcounter++;
        }
        while (tableprimcounter < this.Tableprimarys.length)
      }
      if (query !== "") {
        this.filteredtableList = this.Tables.filter(function (el) {
          return el.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
        }.bind(this));
      } else {
        this.filteredtableList = []
      }
    } 

    selecttable(item) {
      this.recommendationForm.patchValue ({table: item})
      this.filteredtableList = [];
      this.selectedIdx = -1;
    }

    filterTopic(idx: number) {
    this.topicnumber=idx;
    const query = this.recommendationForm.get('topics').value;
    const defquery = query[idx].topic;
        if (defquery !== "") {
            this.filteredtopicList = this.Topics.filter(function (el) {
                return el.toLowerCase().indexOf(defquery.toLowerCase()) > -1;
            }.bind(this));
        } else {
            this.filteredtopicList = [];
        }
    }

    selecttopic(item) {
      console.log(item, this.topicnumber)
        const query = this.recommendationForm.get('topics').value;
        query[this.topicnumber]=item;
        console.log (query);
        this.recommendationForm.patchValue ({topics[this.topicnumber].topic:item});       
        this.filteredtopicList = [];
        this.selectedIdx = -1;
    }

When i select an option in the fileteredTable list it works, but i cannot get it to work in the fileterdTopiclist.