Question

如果您需要更多有关我将拥有的功能的信息，请参阅以下内容。我将有一个项目部分，其中包含从JSON文件填充的每个项目的卡片。当他们单击网站上的网站上的卡片时，将有一个隐藏的div，它将通过ngIf显示。

如果您需要一个更好的例子来说明我要完成的工作，请查看该开发者的网站。我正在尝试复制他在项目部分中的功能：https://andrewborstein.com/

在该组件中，我导入JSON数据，并在HTML部分中使用ngFor来显示每个部分，如下例所示：

组件文件

public ngOnInit(): void {
    for(var i = 0; i < ExperienceJSON["Experience"].length; i++)
        this.ExperienceList.push(ExperienceJSON["Experience"][i])
}

HTML文件

<div class="col-md-4" *ngFor="let Experience of ExperienceList">
    <mat-card>
    <div class="simple-content">{{Experience.sample}}</div>
    <div class="detailed-content" *ngIf="Visible">{{Experience.details}}</div>
    </mat-card>
</div>

现在，当然，我可以为每张卡分配一个变量，并以这种方式切换可见性，但这需要将所有内容都进行硬编码。我想以一种编辑我的JSON文件的方式进行设置。我如何能够在不对每个卡进行硬编码的情况下分别触发每个卡的可见性？

我正尽全力围绕该过程，但我不知道如何真正实现它。任何帮助将不胜感激。

Answer 1

您可以在json上添加条件属性，并将其放在* ngIf中作为模板！

<div class="col-md-4" *ngFor="let Experience of ExperienceList">
    <mat-card *ngIf='Experience.condtion'>
    <div class="simple-content">{{Experience.sample}}</div>
    <div class="detailed-content" *ngIf="Visible">{{Experience.details}}</div>
    </mat-card>
</div>

控制多个ngFor元素的可见性

1 个答案: