如何在 Angular 11 中为数据创建模板上下文答案

【问题标题】：How to make template context for data in Angular 11如何在 Angular 11 中为数据创建模板上下文
【发布时间】：2022-01-25 01:44:34
【问题描述】：

我在 Angular 11 的组件模板中有这样的代码：

<div class="volunteer" *ngFor="let volunteer of volunteers">
    <div class="personal-data">
        <h2>{{volunteer.personalData.firstName}} {{volunteer.personalData.lastName}}</h2>
        <p>{{volunteer.personalData.email}}</p>
        <p>{{volunteer.personalData.phone[volunteer.personalData.primaryPhone]}}</p>
    </div>
</div>

我想在它周围放置一个数据上下文，以便它知道引用personalData对象，如下所示：

<div class="volunteer" *ngFor="let volunteer of volunteers">
    <div class="personal-data">
        {{#volunteer.personalData}}
            <h2>{{firstName}} {{lastName}}</h2>
            <p>{{email}}</p>
            <p>{{phone[primaryPhone]}}</p>
        {{/volunteer.personalData}}
    </div>
</div>

我不确定 Angular 的语法是什么。

【问题讨论】：

我认为这是不可能的，至少在模板中是不可能的。
我刚刚在模板中发现了这个新的结构指令：stackoverflow.com/a/45338683/511663

标签： angular angular11

【解决方案1】：

您可以将结构指令用作*ngIf 并将其分配给模板变量。所以会短一点：

<div class="volunteer" *ngFor="let volunteer of volunteers">
    <div class="personal-data" *ngIf="volunteer?.personalData as personalData">
        <h2>{{personalData.firstName}} {{personalData.lastName}}</h2>
        <p>{{personalData.email}}</p>
        <p>{{personalData.phone[personalData.primaryPhone]}}</p>
    </div>
</div>

【讨论】：

【解决方案2】：

您可以将<ng-template> 与上下文变量一起使用。您可以在[ngTemplateOutletContext] 处传入一个对象并在模板中使用它。不确定primaryPhone 部分，但如果您将其设为volunteer 的属性之一，您应该会很好。

<div class="volunteer" *ngFor="let volunteer of volunteers">
    <ng-template [ngTemplateOutlet]="volunteerTemplate"
    [ngTemplateOutletContext]="{volunteerToPass: volunteer}">
    </ng-template>
</div>

<ng-template #volunteerTemplate let-volunteerInTemplate="volunteerToPass">
    <div class="personal-data">
        <h2>{{volunteerInTemplate.firstName}} {{volunteerInTemplate.lastName}}</h2>
        <p>{{volunteerInTemplate.email}}</p>
        <p>{{volunteerInTemplate.phone}}</p>
    </div>
</ng-template>

【讨论】：