Как перезагрузить компонент с новым списком?

Question

Я хочу перезагрузить свой компонент, нажав кнопку с новым списком. Поэтому моя проблема заключается в том, что он не перезагружает компонент с новым списком после нажатия одной из кнопок. Может ли кто-нибудь помочь мне с этим? Большое спасибо.

Это мой HTML-файл, где я передаю свой список.

<div class="content_box_left" *ngIf="isloaded==true">
  <component [list]="actualList"></component>
</div>

Некоторый код из моего Typescript-файла:

actualList=[];
list1=[1, 2, 3, "dog"];
list2=[3, "cat", "mouse", 47];

button1(){
   console.log("Button 1 pressed");
   this.actualList=this.list1;
}
button2(){
   console.log("Button 2 pressed");
   this.actualList=this.list2;
}

Компонент-HTML-код:

<div>
    <ion-list>
        <ion-item *ngFor="let list of list">
            <ion-label>{{list}}</ion-label>
        </ion-item>
    </ion-list>
</div>

Компонент-Машинопись-код:

@Component({
  selector: 'caiditems',
  templateUrl: 'caiditems.html'
})
export class CaiditemsComponent {

  @Input()
  list = []; 
  constructor() {}    
 }
}

Answer 1

Выяснил в чем проблема. *ngFor не обновляется после некоторых изменений в массиве или списке. Использование trackBy было решением моей проблемы: https://netbasal.com/angular-2-improve-performance-with-trackby-cc147b5104e5

Answer 2

У вас есть ошибка здесь

actualList=[];
list1=[1, 2, 3, dog];
list2=[3, cat, mouse, 47];

изменить на

actualList=[];
list1=[1, 2, 3, 'dog'];
list2=[3, 'cat', 'mouse', 47];

собака, кошка, мышь - строка, вам нужна одинарная кавычка. Остальная часть кода в порядке. Взгляни на мой стек-блиц. Я использовал твой код

https://stackblitz.com/edit/angular-zbvh8k?file=src%2Fapp%2Fapp.component.html