Angular Typescript 更改数组中的对象属性而不更新视图

Question

我正在学习 Typescript 和 Angular，我有一个问题，即为什么在更新设置为我定义的对象的数组值时我的视图没有更新。我怀疑这与我失去上下文有关？我需要以某种方式运行 ngZone 吗？（我试过没有成功）。我怀疑这很简单，或者我忽略了一个概念。

cardItems = {

  addUser: true,

  inventory: false

}

cardCollapseItems = [

{

  label: "addUser",

  item: this.cardItems.addUser

},

{

  label: "inventory",

  item: this.cardItems.inventory

},

collapseCard(value){

 let index = this.cardCollapseItems.findIndex(item => item.label === value)

 let cardItem = this.cardCollapseItems[index]

 cardItem.item ? cardItem.item = false : cardItem.item = true;

}

 <ion-card-header (click)="collapseCard('addUser')">

 <ion-card-content [hidden]="cardItems.addUser" >

Answer 1

尝试这个：一：@Component({&nbsp; selector: 'app-example-page',&nbsp; templateUrl: './example.page.html',&nbsp; styleUrls: ['./example.page.scss'],&nbsp; changeDetection: ChangeDetectionStrategy.OnPush,})二：public cdRef: ChangeDetectorRef;public constructor(&nbsp; &nbsp; cdRef: ChangeDetectorRef,&nbsp; ) {&nbsp; &nbsp; this.cdRef = cdRef;&nbsp; }collapseCard(value){&nbsp;let index = this.cardCollapseItems.findIndex(item => item.label === value)&nbsp;let cardItem = this.cardCollapseItems[index]&nbsp;cardItem.item ? cardItem.item = false : cardItem.item = true;&nbsp;this.cdRef.detectChanges();}

Answer 2

如果您试图cardItems在您的视图中显示。你必须从collapseCard函数中更新它。更新this.cardItems将解决问题。您将 true 或 false 分配给仅限于函数中的初始化变量的值。