Как получить асинхронное условное свойство внутри цикла Angular * ngFor сложного объекта - PullRequest
Новая
       7

Как получить асинхронное условное свойство внутри цикла Angular * ngFor сложного объекта

0 голосов
/ 20 апреля 2019

Предположим, у меня есть пустой наблюдаемый объект, который в какой-то момент времени заполняется такими данными: 

const props$ =
{
  prop1: 1,
  prop2: 2,
  prop3: 3,
}

И у меня есть цикл с такими данными: 

const loopData =
[
 { property: "prop1", label: "First" },
 { property: "prop2", label: "Second" },
 { property: "prop3", label: "Third" },
]

И вот мой HTML: 

<div *ngFor="let obj of loopData">
    <label>{{ obj.label }}</label>
    <span>{{(props$ | async)?.obj.property}}</span> <---- this line of code will not work
</div>

Если я сделаю такую ​​строку, как этот (props$ | async)?[obj.property] компилятор пожалуется на запрос : после ], думая, что я пытаюсь записать условие в одну строку, который доступен в ES6.Так что, есть ли какой-нибудь случай, как я могу сделать это яснее?Одна мысль, с которой я пришел, это сделать так: 

<div *ngFor="let obj of loopData">
    <label>{{ obj.label }}</label>
    <ng-container *ngIf="props$ | async as props">
        <span>{{props[obj.property]}}</span>
    </ng-container>
</div>

Ответы [ 3 ]

2 голосов
/ 20 апреля 2019

Это сработает (см. https://stackblitz.com/edit/angular-bbs4sa):

<li *ngFor="let obj of loopData">
  <label>{{obj.label}}</label>
  <span>{{(props$ | async)[obj.property]}}</span>
</li>

Если вам нужна проверка на ноль, то я думаю, что проще всего извлечь функцию в компоненте (см. https://stackblitz.com/edit/angular-epvtnh):

<li *ngFor="let obj of loopData">
  <label>{{obj.label}}</label>
  <span>{{getPropertyValue(props$ | async, obj.property)}}</span>
</li>

getPropertyValue(props: Record<string, number>, propertyName: string) {
  return props ? props[propertyName] : null;
}
1 голос
/ 20 апреля 2019

У меня есть одно работоспособное решение от @ mike-jerred.Но я думаю, что мой ответ также может быть решением. 

<ul>
  <li *ngFor="let obj of loopData">
    <label>{{obj.label}}</label>
    <ng-container *ngIf="props$ | async as props">
        <span>{{props[obj.property]}}</span>
    </ng-container>
  </li>
</ul>
0 голосов
/ 20 апреля 2019

Сначала цитируем документацию для оператора безопасной навигации

Оператор безопасной навигации обозначается как (?.) И используется в то время как мы доступ к свойству из объекта.

Первое написанное вами выражение: 

 <span>{{(props$ | async)?.obj.property}}</span>

Это обрабатывает (props$ | async) как объект, а затем обрабатывает .obj как его свойство, а другое свойство, связанное с ним, как .property, а это не тот случай, который вам нужен.

object.property приводит к значению, и вам нужно передать это значение как поиск в скобках в props$.

Оператор безопасного навигатора работает с доступом к свойству объекта с использованием точечной нотации и не работает с поиском свойств с использованием скобок. (например, объект [поиск])

...