Question

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

这是我提交列表的HTML文件。

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

我的打字稿文件中的一些代码：

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-Typescript-Code：

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

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

Answer 1

找出问题所在。 * ngFor在数组或列表中发生某些更改后不会更新。使用trackBy是解决我的问题的方法：https://developers.facebook.com/docs/graph-api/reference/v3.1/post#updating

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

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

2 个答案: