Angular асинхронный канал с @for
Я использую последнюю версию Angular 18.1.0 и хочу использовать асинхронный канал для массива стран, полученных из серверной части с помощью http-клиента. Но при использовании новой угловой функции @for выдается ошибка:
Тип «Страна» должен иметь метод «Symbol.iterator», который возвращает итератор.
Мой код выглядит следующим образом страна.компонент.html
<main>
<select name = "countries" id = "countries-selection">
@for (country of countries$ | async; track $index) {
<option value = "{{country}}">{{ country }}</option>
}
</select>
</main>
страна.компонент.ts
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import { Country } from './country.model';
import { Observable, map } from 'rxjs';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-country',
standalone: true,
imports: [CommonModule],
templateUrl: './country.component.html',
styleUrl: './country.component.css'
})
export class CountryComponent {
countries$: Observable<Country>;
constructor(private httpClient: HttpClient) {
this.countries$ = this.httpClient.get('http://localhost:3000/countries').pipe(
map((response: any) => <Country> response.json()));
}
}
Обновлено: Я получаю следующий массив с сервера:
[
{
"id": "1",
"name": "Australia",
"isCurrent": true,
"timezone": "Asia/Karachi"
},
{
"id": "2",
"name": "Canada",
"isCurrent": true,
"timezone": "Asia/Karachi"
},
{
"id": "3",
"name": "Finland",
"isCurrent": false,
"timezone": "Europe/Tallinn"
}
]
Каким может быть возможное решение, если я хочу использовать rxjs, а не JS async/await для выбора стран?
Рискну сказать, что response.json() делает не то, что вы думаете. Более того, response.json() уже давно не требуется в Angular. Попробуйте: this.countries$ = this.httpClient.get<Country[]>('http://localhost:3000/countries'); без pipe(map())
Ответы 1
@for перебирает массивы. В соответствии с вашими типами countries$ является Observable объекта Country, который Angular не допускает для перебора. Просто добавьте [], чтобы указать, что это список объектов Country:
export class CountryComponent {
countries$: Observable<Country[]>;
constructor(private httpClient: HttpClient) {
this.countries$ = this.httpClient.get<Country[]>('http://localhost:3000/countries');
}
}
Еще одно замечание: вызов response.json() не поддерживается HTTP-клиентом Angular. По умолчанию он будет анализировать JSON, поэтому, возможно, вы можете просто пропустить эту часть.
Я отредактировал свой вопрос с ответом сервера, который я получаю. На самом деле я получаю массив с сервера.
Но ваш тип по-прежнему Observable<Country>, когда он должен быть массивом, например. Observable<Country[]>
@ Фахад, это то, что я подозревал, как я уже сказал в своем ответе, вам нужно настроить типы. В настоящее время они не отражают реальности.
@Фахад ссылка на stackblitz
Большое спасибо @JSON Деруло, Нарену и другим. вы сэкономили мне часы. В моем коде было несколько глупых ошибок. Теперь все работает.
пожалуйста, поделитесь ответом API