控制多个 ngFor 元素的可见性答案

【问题标题】：Controlling Visibility on multiple ngFor elements控制多个 ngFor 元素的可见性
【发布时间】：2019-03-31 09:52:35
【问题描述】：

如果您需要了解我将拥有的功能的更多信息，请参阅以下内容。我将有一个项目部分，其中包含从 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 文件的方式进行设置。我如何能够单独触发每张卡片的可见性，而无需为每个卡片硬编码变量？

我正在努力思考这个过程，但我不知道如何真正实现它。任何帮助将不胜感激。

【问题讨论】：

您要么需要创建一个布尔数组，要么为每个对象添加一个属性（要么添加到服务器上的 JSON，要么您需要自己在组件中创建它）。我通常是后者。
我真的不明白你的问题。你可以做 ngIf="Experience.IsVisible" 什么的。
@Silvermind 因此，从本质上讲，该卡将具有单击功能，当按下该功能时，将切换属于该卡的子 div 之一的可见性。我试图看看是否有一种方法可以在不给每个子 div 自己的变量的情况下实现这一点

标签： javascript html angular typescript angular6

【解决方案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>

【讨论】：