Я рендеринг HTML-таблицы с использованием Angular (6), и я получаю два потока данных с сервера:
this.columns = this.http.get('/api/columns');
this.rows = this.http.get('/api/rows');
Скажем, ради вопроса, оба вызова API возвращают массив с объектамикак это:
{
"name": "value",
"key": "[key which joins the columns and rows]"
}
и мой шаблон:
<tr *ngFor="let row of (rows | async)">
<td *ngFor="let column of (columns | async)">{{ (join(row, column)| async).name }}</td>
</tr>
Как вы можете видеть, он присоединяется по ключу, вызывая метод соединения:
join(row, column) : Observable<string> {
return this.colums.pipe(
single((c: columns) => {
return c.key === row.key;
}),
map((c: column) => {
return c.name;
})
)
}
Моя проблемаявляется то, что во время визуализации данных Observable продолжает разрешать для каждой строки и каждого столбца.Таким образом, каждый цикл цикла API называется.Я не знаю почему.У меня сложилось впечатление, что когда асинхронный канал разрешается один раз, он просто перебирает эту коллекцию.