Как привязать результат @for к переменной?
В Angular 16 (и более ранних версиях) можно было использовать «as» после цикла for, чтобы объявить отфильтрованные результаты как переменную.
Вот так:
<div *ngFor = "let item of (items | pipe: Query) as results">
{{item}}
</div>
Как мне добиться этого в angular 17?
Я уже пробовал использовать
@for (let item of (items | pipe: Query) as results; track item.id) {
<div>
{{item}}
</div>
}
но это не работает. Я хотел бы иметь возможность использовать отфильтрованные результаты и сохранять их внутри массива элементов.
Это возможно? Любая помощь будет принята с благодарностью!
Ответы 3
Подумайте, что с помощью синтаксиса @for вы не можете объявить локальную переменную с помощью as.
Вы можете поискать работу с NgTemplateOutlet.
<ng-container
[ngTemplateOutlet] = "resultTemplate"
[ngTemplateOutletContext] = "{$implicit: items | pipe: Query}"
>
</ng-container>
<ng-template #resultTemplate let-results>
{{ results | json }}
@for (item of results; track item.id) {
<div>{{item | json}}</div>
}
</ng-template>
Альтернативно вы можете использовать Pipe в компоненте.
@Component({
selector: 'app-root',
standalone: true,
templateUrl: `main.html`,
providers: [YourQueryPipe]
})
export class App {
name = 'Angular';
items = [{ id: '1' }, { id: '2' }, { id: '3' }];
constructor(private queryPipe: YourQueryPipe) {}
queryItems = this.queryPipe.transform(this.items, /* value/fiter needed in YourQueryPipe */)
}
@for (item of queryItems; track item.id) {
<div>{{item}}</div>
}
Псевдонимы коллекций (т. е. с ключевым словом as) не поддерживаются с помощью @for в синтаксисе потока управления Angular 17.
См. этот выпуск на GitHub с соответствующей цитатой здесь:
@for, как уже упоминалось, не поддерживает псевдонимы коллекции.
В настоящее время угловая миграция не регистрирует предупреждение, но должна регистрировать предупреждение при обнаружении as во время миграции. Есть открытая проблема, как это исправить.
В качестве альтернативы, если вам нужен явный псевдоним, можно извлечь результаты с помощью канала в @if, а затем использовать их в @for. Что-то вроде этого:
@if (items$ | async; as results) {
@for (item of results; track item.id) {
<div>
{{item}}
</div>
}
Прежде всего, я должен сказать, что вам не следует использовать let item в этом синтаксисе. вам стоит написать @for(item of items){}.
а что касается псевдонима, вы можете использовать псевдоним в @if, но, насколько я знаю, в @for псевдонима нет.
вы можете использовать @if (items; as x) перед циклом:
@if (items | pipe: Query; as results){
@for (item of results; track item.id) {
<div>
{{item}}
</div>
}
}