#angular
Вопрос:
Я пытаюсь воссоздать пример приложения angular для практического обучения, и я получаю сообщение об ошибке, в котором говорится, что «Имя свойства» не существует для типа » Сотрудник []».». Я создал интерфейс «Сотрудник», в котором есть строковая переменная «имя».
export interface Employee {`
id: number;
name: string;
email: string;
jobTitle: string;
phone: string;
imageUrl: string;
employeeCode: string;
}
Мой компонент app.выглядит следующим образом:
import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Employee } from './employee';
import { EmployeeService } from './employee.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public employees: Employee[];
constructor(private employeeService: EmployeeService){
}
ngOnInit() {
this.getEmployees();
}
public getEmployees(): void {
this.employeeService.getEmployees().subscribe(
(response: Employee[]) => {
this.employees = response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
}
И мой app.component.html выглядит так:
<div *ngFor="let employee of employees" >
<div>{{employee.name}}</div>
</div>
В HTML, когда я набираю «сотрудник». он не регистрирует имя в качестве переменной в интерфейсе сотрудника и выдает ошибку, в которой говорится, что свойство » имя » не существует в типе Сотрудник[]. Я новичок в этом и не совсем понимаю, что я здесь делаю не так. Мы очень ценим любую помощь. Спасибо!
Комментарии:
1. В сообщении об ошибке четко указано, что вы пытаетесь получить доступ к свойству
name
массива. Вы уверены, что не используете{{ employees.name }}
в своем jsx?
Ответ №1:
Проблема в том, что вызовы API, выполняемые на серверную часть, выполняются асинхронно, поэтому ваш массив не заполняется значениями, но код для его рендеринга уже запущен. Есть несколько точек решения, которые мы можем сделать
- Мы можем сделать свойство сотрудника обещанием и использовать для него асинхронный канал в HTML-шаблоне.
- Мы можем использовать асинхронное ожидание при вызовах функций API.
- Мы можем визуализировать компонент только после загрузки компонента с помощью флага.
Выполнение 3-го решения здесь — >
В файле Ts ->
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public employees: Employee[];
public listLoaded = false; // Flag for api Load Detection.
constructor(private employeeService: EmployeeService){
}
ngOnInit() {
this.getEmployees();
}
public getEmployees(): void {
this.employeeService.getEmployees().subscribe(
(response: Employee[]) => {
this.employees = response;
this.listLoaded = true; // Setting Flag on List Load
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
}
В Html-Файле — >
<div *ngIf='listLoaded'>
<div *ngFor="let employee of employees" >
<div>{{employee.name}}</div>
</div>
</div>