angular - 表没有获得价值，因为价值未定义

问题描述

我正在尝试使用 Angular 中返回的数据在我的表格中进行投标。但是道具值是未定义的。

我的组件：

export class EquipmentsComponent implements OnInit {

  form: any;
  titleForm!: string;
  equipments!: Equipments[];

  constructor(private EquipmentService: EquipmentsService) { }

  ngOnInit(): void {

      this.EquipmentService.Getall().subscribe(result => {
      this.equipments = result;
    });
  }

我的服务：

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type' : 'application/json'
  })
};

@Injectable({
  providedIn: 'root'
})
export class EquipmentsService {
  url = "https://localhost:5001/api/Equipment";
  constructor(private http: HttpClient) { }

   Getall(): Observable<Equipments[]>{
    return this.http.get<Equipments[]>(this.url);
  }


  GetWithId(EquipmentsID: number): Observable<Equipments>
  {
    const Url = `${this.url}/${EquipmentsID}`;
    return this.http.get<Equipments>(Url);
  }
  PostEquipment(equipment: Equipments ): Observable<any>{
    return this.http.post<Equipments>(this.url, equipment, httpOptions);
  }
  PutEquipment(equipment: Equipments): Observable<any>{
    return this.http.put<Equipments>(this.url, equipment,httpOptions);
  }

  DeleteEquipment(equipmentId: number): Observable<any>
  {
    const Url = `${this.url}/${equipmentId}`;
    return this.http.delete<Number>(Url, httpOptions);
  }
}

我的界面：

 export interface Equipments{
         EquipmentsID: number;
         Name: string;
         SerialNumber: string;
         Voltage: string;
         ElectricCurrent: string;
         Oil: string;
         Date: Date;
    }

我的 HTML：

<mat-card >
    <div>
      <button type="button" mat-raised-button color="primary">New Equipment</button>
    </div>
      <hr/>

      <table class="w-100"  *ngIf="equipments">
        <h2>Gerenciar</h2>

        <tr>
          <th>Name</th>
          <th>Serial Number</th>
          <th>Voltage</th>
          <th>Eletric Current</th>
          <th>Oil</th>
          <th>Date Register</th>
          <th>Actions</th>

        </tr>


        <tr  *ngFor="let equip of equipments">
          <td>{{equip.Name}}</td>
          <td>{{equip.SerialNumber}}</td>
          <td>{{equip.Voltage}}</td>
          <td>{{equip.ElectricCurrent}}</td>
          <td>{{equip.Oil}}</td>
          <td>{{equip.Date}}</td>
          <td>
            <button mat-raised-button (click)="Click(equip)" color="accent" >Update</button>
            <button mat-raised-button color="warn" (click)="Clickstring(this.equip.Name)"  >Delete</button>
          </td>
        </tr>
      </table>
  </mat-card>

我的调试：

我的调试图像

我收到带有 DB 数据的设备对象，但值为equipments.Name等Equipments.SerialNumber。返回未定义。

我的页面：

我的页面

我的页面没有显示数据，而是显示按钮，我使用它们进行调试，如果我单击更新返回一个包含所有道具的对象，并且单击删除时显示道具中的值，如图像调试所示。

标签： angulartypescriptpropertiesundefined

angular - 表没有获得价值，因为价值未定义

问题描述

解决方案

推荐阅读