如何使用新列表重新加载组件？

Question

我想通过单击带有新列表的按钮来重新加载我的组件。所以我的问题是，单击其中一个按钮后，它不会使用新列表重新加载组件。有人可以帮我吗？非常感谢。

这是我交出清单的 HTML 文件。

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

我的 Typescript-File 中的一些代码：

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>

组件-Typescript-代码：

@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];

dog、cat、mouse 是需要单引号的字符串。其余的代码都很好。看看我的stackblitz。我用了你的代码

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