Question

我正在编写一个函数来生成对象数组，如下所示：

  setswitch() {
    for (let i = 1; i < this.assets.length; i++) {
      let cardshow = {
        id: i.toString(),
        isShow : false
      };
      this.cards.push(cardshow);
    }
  }

我在另一个函数中修改数组对象中字段的值，例如：

this.cards[i]["isShow"] = true;

我想基于对象的字段值在div上使用ngIf。我正在尝试这样做：

 <div *ngFor="let notcard of notcards; index as i">
      <div class="pull-right" [ngClass]="'assetdetail'+i" *ngIf="cards[i]['isShow']">
<div>

这不起作用。如何获得预期的结果？

Answer 1

我习惯以不同的方式编写ngFor指令。你可以试试吗？

<div *ngFor="let notcard of notcards; let i = index;">
    <div class="pull-right" [ngClass]="'assetdetail'+ i" *ngIf="cards[i].isShow">
<div>

Answer 2

我在Stackblitz上设置了您提供的代码，顺便说一句，您可以这样做，只是发现您提供的每一行代码确实有效。

所以它不起作用的唯一原因是未正确设置使用的notCards数组（您未提供任何值）。例如，卡片的数组长度不能比notCards短。

https://stackblitz.com/edit/angular-2je7dr

Answer 3

从您的示例中，我不清楚如何创建notcards或数组中的内容...我只是用{初始化了notcards和card数组length中的{1}}，以确保它们匹配。重要的是长度匹配，否则此处的逻辑将无法正常工作。

下面的工作Stackblitz示例。

如果您需要10 toggle而不仅仅是暴露它，我也建议使用以下内容。

div

Stackblitz

https://stackblitz.com/edit/angular-6zfewb?embed=1&file=src/app/app.component.html

Answer 4

尝试一下：

<div *ngFor="let notcard of notcards; index as i">
    <div *ngFor="let card of cards">
        <div class="pull-right" [ngClass]="'assetdetail'+i" *ngIf="card.isShow">
    </div>
</div>

如果对象数组的元素中的字段为true，则显示div

4 个答案: