Блог

Я пытаюсь воссоздать пример приложения 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, когда я набираю «сотрудник». он не регистрирует имя в качестве переменной в интерфейсе сотрудника и выдает ошибку, в которой говорится, что свойство » имя » не существует в типе Сотрудник[]. Я новичок в этом и не совсем понимаю, что я здесь делаю не так. Мы очень ценим любую помощь. Спасибо!

Проблема в том, что вызовы API, выполняемые на серверную часть, выполняются асинхронно, поэтому ваш массив не заполняется значениями, но код для его рендеринга уже запущен. Есть несколько точек решения, которые мы можем сделать

1. Мы можем сделать свойство сотрудника обещанием и использовать для него асинхронный канал в HTML-шаблоне.
2. Мы можем использовать асинхронное ожидание при вызовах функций API.
3. Мы можем визуализировать компонент только после загрузки компонента с помощью флага.

Выполнение 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>