Как динамически обновить список флажков в Angular 6.0

Question

У меня есть модал, который отображает список флажков в зависимости от того, какую каплю выбирает пользователь на этом модале.Моя проблема заключается в обновлении списка.Вот мой код:

modals.components.html

           <label for="channel">Channel</label>
           <select formControlName="channel" (change)="loadNewProducts($event)">
                 <option [value]="channel" *ngFor="let channel of channels">{{channel}}</option>
           </select>  

           <div style="float: left;padding-right: 10px;padding-left: 10px;" *ngFor="let product of myForm.controls['myproducts'].controls; let i = index">
                 <input type="checkbox" [formControl]="product">
               <label style="padding-left: 5px;">{{ products[i].name }}</label>
           </div>

Существует два массива - один имеет продукты, а другой массив имеет true / false, если он был выбран.Когда я выбираю элемент в каналах - я вызываю «loadNewProducts» со значением.Затем мне нужно перезагрузить мои «продукты»

В моем modals.component.ts я объявил несколько пустых массивов:

products = [];products_selected = [];

вот мой loadNewProducts

    loadNewProducts (event: any) {
      //update the ui
      console.log("product",event.target.value);
      this.products=this.another_list;
      this.myForm.controls['myproducts']=this.another_list;
    }

Вот где я терплю неудачу.Я пытаюсь обновить список продуктов новым списком и не знаю, как это сделать.Есть идеи (это понятно)?