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"的形式在模板中使用它，我不确定如何在此处传递子字段。

那么如何将isCollapsed的子字段item与[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

您可以尝试此解决方案。

我已经创建了stackbliz demo

<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>

错误TypeError：_co.collapsed不是函数吗？

1 个答案: