错误类型错误:_co.collapsed 不是一个函数?

Question

我的HTML模板，它使用ngFor如下，

<div class="card" *ngFor="let item of mydataarray">
<div class="card-header" (click)="item.isCollapsed = !item.isCollapsed">
<div class="card-body" [collapse]="item.isCollapsed">
.. Body of my card
</div>
</div>                
</div>

在上面的代码中，当我尝试使用有效值加载此页面时mydataarray。

我得到item的有效值，例如{{ item.isCollapsed }}返回true但是当我尝试将其用作[collapse]="item.isCollapsed"时，它会抛出如下错误：

ERROR TypeError: _co.collapsed is not a function

我认为问题出在传递的item.isCollapsed字段上，如果我声明没有对象的字段，例如isCollapsed并在我的模板中使用它，因为它[collapse]="isCollapsed"工作，我不确定如何在此处传递子字段。

那么如何将item的子字段isCollapsed与[collapse]绑定呢？

更新

根据克里希纳·拉索尔(Krishna Rathore(的回答，我尝试了*ngIf="item.isCollapsed"也没有奏效。

于是我进一步调查发现，我的组件文件中的值返回函数如下：

get mydataarray() {
if(this.mydataarray) {
// Some pre-processing on data which was not erroneous
return this.mydataarray;
} else {
return null;
}   
}

所以我只是简单地将处理部分移到了我第一次获得值的不同位置mydataarray并更改了函数以返回预处理的静态值，如下所示：

get mydataarray() {
return this.mydataarray;
}

现在崩溃正在发生，即使是[collapse]="item.isCollapsed"，也发生在*ngIf="item.isCollapsed"。

虽然我无法完全理解进行预处理有什么问题 部分在get mydataarray()方法中。

Answer 1

您可以尝试此解决方案。

我已经创建了堆栈演示

<div class="card" *ngFor="let item of mydataarray">
<div class="card-header" (click)="item.isCollapsed = !item.isCollapsed">
Header
</div>
<div class="card-body" *ngIf="item.isCollapsed">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>