在 ngFor 中隐藏/显示页面加载时的单个项目答案

【问题标题】：Hide/show individual items on page load inside ngFor在 ngFor 中隐藏/显示页面加载时的单个项目
【发布时间】：2018-11-24 20:38:47
【问题描述】：

我的问题也很相似this one

不同之处在于：我必须首先基于默认语言显示文本区域，然后使用所选语言显示。我每种语言都有一个文本区域，一次只能显示一个。我可以应用Thierry Templier 的答案来毫无问题地获得类似标签的行为。

代码如下：我使用默认语言呈现一组单选按钮选项。

<div *ngFor="let language of model.appLanguages" style="display:inline">
    <input type="radio" name="title"
           id="language.languageId"
           [checked]="language.isDefault" /> {{ language.displayName }} 
  </div>

然后我必须首先根据默认语言显示一个文本区域，然后使用所选语言

<div [(hidden)]="showDefaultFirst(text.languageId)" class="row" *ngFor="let text of model.texts">
  <div id="{{text.languageId}}" class="col-sm-12">
    <editor [(ngModel)]="text.content" [ngModelOptions]="{standalone: true}" apiKey="..."></editor>
  </div>
</div>

后面的代码就像 Thierry Templier 的答案。知道如何根据默认值添加额外的步骤以在页面加载时隐藏元素吗？

【问题讨论】：

标签： angular angular-ngfor

【解决方案1】：

您需要使用 *ngIf 并检查条件并呈现必要的模板。

<div *ngFor="let language of model.appLanguages" style="display:inline">
<ng-container *ngIf="showDefaultFirst(text.languageId)">
    <input type="radio" name="title"
           id="language.languageId"
           [checked]="language.isDefault" /> {{ language.displayName }} 
</ng-container>
</div>

【讨论】：