Angular 在ngFor中隐藏/显示页面加载上的单个项目

我的问题也很相似

区别在于：我必须先显示默认语言的文本区域，然后显示所选语言的文本区域。我每种语言有一个文本区，一次只能显示一个文本区。我可以应用的答案，以获得标签一样的行为没有任何问题

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

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

{{language.displayName}

然后我必须显示一个文本区域，首先基于默认语言，然后基于所选语言

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

背后的代码就像蒂埃里·坦普尔的答案。

---

您知道如何添加额外的步骤来根据默认值隐藏页面加载中的元素吗？

您需要使用*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>

{{language.displayName}