Как сделать контекст шаблона для данных в Angular 11

У меня есть такой код в моем шаблоне компонента в 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.


angular angular11
person Jeremy Schultz    schedule 09.02.2021    source источник
comment
Я не думаю, что это возможно, по крайней мере, не в шаблоне.   -  person MikeOne    schedule 09.02.2021
comment
Я только что нашел эту новую структурную директиву, которая позволила бы использовать ее в шаблоне: stackoverflow.com/a/45338683/511663   -  person Jeremy Schultz    schedule 13.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать структурную директиву как *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>
person Julius    schedule 09.02.2021