Получить массив объектов angular CLI
Привет, я пытаюсь получить данные из запроса на получение в angular. У меня есть квартира класса, которая выглядит так:
export class Apartment {
id: number;
address: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
Сервис
@Injectable({
providedIn: 'root'
})
export class Service {
baseURL = 'http://localhost:3000';
constructor(private httpClient: httpClient) {}
getApartments() {
return this.httpClient.get(this.baseURL + '/apartments');
}
}
Компонент
export class SettingsComponent implements OnInit {
apartments: Apartment[] = [];
constructor(private apiService: Service) {
// todo: fetch data here...
}}
У меня есть API для отдыха, который работает, и файл json для чтения, который выглядит так:
{
"id" : 0,
"address: "not assinged yet"
}
Как я могу прочитать и передать данные в массив апартаментов?
Ответы 3
В подписке вам нужно только объявить (data:any) вот так
constructor(private apiService: Service) {
this.apiService.getApartments().subscribe((data:any)=>{
this.apartments = data;
});
}
в этом случае он определил тип для квартир, если вы их не используете, он показывает ошибку, не может не использовать
Ну, тогда используйте определенный тип, а не any.
Ваш API возвращает список квартир? Если да, вы можете подойти так:
export class SettingsComponent implements OnInit {
apartments: Apartment[] = [];
constructor(private apiService: Service) {}
}
ngOnInit(){
this.fetchApartments();
}
fetchApartments(){
this.apiService.getApartments().subscribe(
response => {
this.apartments = response;
}
);
}
Или,
constructor(private apiService: Service) {
this.apiService.getApartments().subscribe(
response => {
this.apartments = response;
}
);
}
Если у вас нет каких-либо методов, специфичных для класса, я бы сам не использовал здесь класс, только интерфейс. Но если вы хотите иметь класс и создавать экземпляры своих данных для этого класса, вам нужно сопоставить свои данные, здесь, предположительно, вы получите массив. Также сообщите angular, что вы получаете в своем запросе:
getApartments() {
return this.httpClient.get<Apartment[]>(this.baseURL + '/apartments').pipe(
map((arr) => arr.map(x => new Apartment(x.id, x.address)))
)
}
Затем в вашем компоненте:
ngOnInit() {
this.apiService.getApartments()
.subscribe((data: Apartment[]) => this.apartments = data);
}
Но, как я уже упоминал, я бы использовал интерфейс, если бы в классе не было методов:
export interface Apartment {
id: number;
address: string;
}
и запрос на получение, просто:
getApartments() {
return this.httpClient.get<Apartment[]>(this.baseURL + '/apartments')
}
и подпишитесь в упомянутом выше компоненте.
если я использую интерфейс и относительный метод getApartments, мне все равно нужно подписаться или достаточно вызова getApartments?
С http-запросами мы имеем дело с холодными наблюдаемыми, вам всегда нужно подписаться, либо с помощью subscribe, либо с помощью async пайпа в шаблоне :)
Если нет необходимости работать с данными, полученными в вашем TS-файле, очень удобно использовать асинхронный канал: angular.io/api/common/AsyncPipe Но если вам нужно как-то манипулировать данными в TS-файле, я бы предложил использовать subscribe.
Не используйте никакие. Это противоречит цели ТИПscript. Всегда вводите свои данные, даже если только для себя. Предполагая, что вы хотите облегчить себе жизнь с помощью отладки;)