Angular 如何解决角度类型错误：无法读取属性'；名称'；未定义的

在将我的应用程序从angular 4更新到angular 8之后，我遇到了一个无法解决的错误。错误如下所示：

OrderOverviewComponent.html:46 ERROR TypeError: Cannot read property 'name' of undefined
at Object.eval [as updateRenderer] (OrderOverviewComponent.html:46)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:45293)
at checkAndUpdateView (core.js:44276)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)
at execEmbeddedViewsAction (core.js:44593)
at checkAndUpdateView (core.js:44271)
at callViewAction (core.js:44636)

我的TypeScript文件如下所示：

import {DatabaseService} from '../../services/database.service';
import {UtiliesService} from '../../services/utilies.service';
import {AdditionalInformationInsertionComponent} from '../utils/additional-information-insertion/additional-information-insertion.component';
import {PrinterService} from '../../services/printer.service';
import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {ModalFeedbackEditComponent} from '../utils/modal-feedback-edit/modal-feedback-edit.component';
@Component({
  selector: 'app-order-overview',
  templateUrl: './order-overview.component.html',
  styleUrls: ['./order-overview.component.scss']
})
export class OrderOverviewComponent implements OnInit {

  orders: any = [];
  machines: any = [];
  selectedMachine: any = [];
  activeOrderId = -1;

  @ViewChild(AdditionalInformationInsertionComponent, {static: false}) child: AdditionalInformationInsertionComponent;


  constructor(private router: Router, private databaseService: DatabaseService, private utilityService: UtiliesService, private printerService: PrinterService) {
  }


  ngOnInit() {
    this.selectedMachine = this.utilityService.getItem('selectedMachine');

    this.databaseService.getAllMachines().subscribe((x) => {
      this.machines = x;
      this.machines = this.machines.sort(function(a, b) {return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0); } );
      this.machines.splice(0, 0, {machineId: -1, name: '-------------'});
    });

    if (this.selectedMachine !== null) {
      this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) => {
        this.orders = x;
        this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
        console.log('TTT', this.activeOrderId);
      });
      return;
    } else {
      this.selectedMachine = [];
    }

    this.databaseService.getAllOrders().then((x) => {
      this.orders = x;
      this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
    });
  }

  public startOrder(order: any)  {
    this.utilityService.setActiveOrder(order);
    this.activeOrderId = order['orderingId'];
    console.log('ORDER TOOL VERSION', order);
    if (order.tool.version == null) {
      this.child.openAdditionalDialog();
    } else {
      // this.printerService.setPrintLabel(order.machine.printerAddress, order.printDescription);
      this.router.navigateByUrl('/orderdata');
    }


  }
  public showOrderData(orderId) {
    this.router.navigateByUrl('/orderdata/' + orderId);
  }

  public changeMachine(machine: any) {
    this.orders =  [];
    this.selectedMachine = machine;
    this.utilityService.storeItem('selectedMachine', machine);
    if (this.selectedMachine.machineId < 0) {
      this.databaseService.getAllOrders().then((x) => {
        this.orders = x;
      });
      return;
    }
    this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) => {
      this.orders = x;
    });
  }

  compareMachines(c1: any, c2: any): boolean {
    return c1 && c2 ? c1.machineId === c2.machineId : c1 === c2;
  }

}

<app-additional-information-insertion></app-additional-information-insertion> <!-- Nur anzeigen, wenn noch keine Variante drinsteht-->
<div class="row">
  <div class="col-12">
    <div class="card">
      <h4 class="card-header">Auftragsübersicht
        <div class="form-inline pull-right" style="display: inline;" >
          <label style="display: inline; font-size: 1rem;" for="machine">Machine: </label>
          <select [compareWith]="compareMachines"  class="form-control form-control-sm" id="machine" required style="margin: -10px 5px -7px;" [ngModel]="selectedMachine" (ngModelChange)="changeMachine($event)">
          <option *ngFor="let machine of machines" [ngValue]="machine" [selected]="machine.machineId == selectedMachine.machineId">{{machine.name}}</option>
        </select>
        </div>
      </h4>
      <div class="card-body">
        <table class="table table-sm">
          <thead>
          <tr>
            <th scope="col">Auftrag</th>
            <th scope="col">Artikel</th>
            <th scope="col">Bezeichnung</th>
            <th scope="col">Menge</th>
            <th scope="col">Behälter</th>
            <th scope="col">Anlage</th>
            <th scope="col" ></th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let order of orders" >
            <th *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" scope="row">{{order['orderingId']}}</th>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['article']['name']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['article']['description']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['totalQuantity']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['quantityOfContainer']}} {{order['typeOfContainer']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['machine']['name']}}</td>
            <td *ngIf="order['orderFinished'] !== 1">
              <button class="btn btn-block  btn-sm btn-outline-primary" *ngIf="order['orderingId'] != activeOrderId " (click)="startOrder(order)">Auftrag starten</button>
              <button class="btn btn-block  btn-sm btn-primary" *ngIf="order['orderingId'] === activeOrderId" (click)="startOrder(order)">Auftrag gestartet</button>
              <!--<span *ngIf="order['orderActive'] === 1">Läuft</span>-->
            </td>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

从'../../services/database.service'导入{DatabaseService}；
从“../../services/utilities.service”导入{utileService}；
从“../utils/additional information insertion/additional information insertion.component”导入{additional information InsertionComponent}；
从“../../services/printer.service”导入{PrinterService}；
从“@angular/core”导入{Component，OnInit，ViewChild}；
从'@angular/Router'导入{Router}；
从“../utils/modal feedbackedit/modal feedbackedit.component”导入{ModalFeedbackEditComponent}；
@组成部分({
选择器：“应用程序订单概述”，
templateUrl:'。/order overview.component.html'，
样式URL:['./订单概览.component.scss']
})
导出类OrderOverview组件实现OnInit{
订单：任何=[]；
机器：任意=[]；
selectedMachine:any=[]；
activeOrderId=-1；
@ViewChild（AdditionalInformationInsertionComponent，{static:false}）子级：AdditionalInformationInsertionComponent；
构造函数（专用路由器：路由器，专用数据库服务：数据库服务，专用实用服务：实用服务，专用打印机服务：打印机服务）{
}
恩戈尼尼特（）{
this.selectedMachine=this.utilityService.getItem（'selectedMachine'）；
this.databaseService.getAllMachines（）.subscribe（（x）=>{
这是机器=x；
this.machines=this.machines.sort（函数（a，b）{return（a.name>b.name）→1:（（b.name>a.name）→1:0）；}）；
this.machines.splice（0,0，{machineId:-1，名称：'--------------'}）；
});
if（this.selectedMachine！==null）{
this.databaseService.getOrdersForMachineId（this.selectedMachine.machineId）.subscribe（（x）=>{
这个。订单=x；
this.activeOrderId=this.utilityService.getActiveOrder（）['orderingId']；
log（'TTT'，this.activeOrderId）；
});
返回；
}否则{
this.selectedMachine=[]；
}
this.databaseService.getAllOrders（）。然后（（x）=>{
这个。订单=x；
this.activeOrderId=this.utilityService.getActiveOrder（）['orderingId']；
});
}
公共startOrder（订单：任意）{
this.utilityService.setActiveOrder（订单）；
this.activeOrderId=order['orderingId']；
console.log（“订单工具版本”，订单）；
if（order.tool.version==null）{
this.child.openAdditionalDialog（）；
}否则{
//this.printerService.setPrintLabel（order.machine.printerAddress，order.printDescription）；
this.router.navigateByUrl（'/orderdata'）；
}
}
公共showOrderData（orderId）{
this.router.navigateByUrl（'/orderdata/'+orderId）；
}
公共兑换机（机器：任何）{
这个。订单=[]；
此选项。选择的机器=机器；
此.utilityService.storeItem（'selectedMachine'，machine'）；
如果（this.selectedMachine.machineId<0）{
this.databaseService.getAllOrders（）。然后（（x）=>{
这个。订单=x；
});
返回；
}
this.databaseService.getOrdersForMachineId（this.selectedMachine.machineId）.subscribe（（x）=>{
这个。订单=x；
});
}
比较机（c1:any，c2:any）：布尔{
返回c1&&c2？c1.machineId==c2.machineId:c1==c2；
}
}

我的HTML文件如下所示：

import {DatabaseService} from '../../services/database.service';
import {UtiliesService} from '../../services/utilies.service';
import {AdditionalInformationInsertionComponent} from '../utils/additional-information-insertion/additional-information-insertion.component';
import {PrinterService} from '../../services/printer.service';
import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router';
import {ModalFeedbackEditComponent} from '../utils/modal-feedback-edit/modal-feedback-edit.component';
@Component({
  selector: 'app-order-overview',
  templateUrl: './order-overview.component.html',
  styleUrls: ['./order-overview.component.scss']
})
export class OrderOverviewComponent implements OnInit {

  orders: any = [];
  machines: any = [];
  selectedMachine: any = [];
  activeOrderId = -1;

  @ViewChild(AdditionalInformationInsertionComponent, {static: false}) child: AdditionalInformationInsertionComponent;


  constructor(private router: Router, private databaseService: DatabaseService, private utilityService: UtiliesService, private printerService: PrinterService) {
  }


  ngOnInit() {
    this.selectedMachine = this.utilityService.getItem('selectedMachine');

    this.databaseService.getAllMachines().subscribe((x) => {
      this.machines = x;
      this.machines = this.machines.sort(function(a, b) {return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0); } );
      this.machines.splice(0, 0, {machineId: -1, name: '-------------'});
    });

    if (this.selectedMachine !== null) {
      this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) => {
        this.orders = x;
        this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
        console.log('TTT', this.activeOrderId);
      });
      return;
    } else {
      this.selectedMachine = [];
    }

    this.databaseService.getAllOrders().then((x) => {
      this.orders = x;
      this.activeOrderId = this.utilityService.getActiveOrder()['orderingId'];
    });
  }

  public startOrder(order: any)  {
    this.utilityService.setActiveOrder(order);
    this.activeOrderId = order['orderingId'];
    console.log('ORDER TOOL VERSION', order);
    if (order.tool.version == null) {
      this.child.openAdditionalDialog();
    } else {
      // this.printerService.setPrintLabel(order.machine.printerAddress, order.printDescription);
      this.router.navigateByUrl('/orderdata');
    }


  }
  public showOrderData(orderId) {
    this.router.navigateByUrl('/orderdata/' + orderId);
  }

  public changeMachine(machine: any) {
    this.orders =  [];
    this.selectedMachine = machine;
    this.utilityService.storeItem('selectedMachine', machine);
    if (this.selectedMachine.machineId < 0) {
      this.databaseService.getAllOrders().then((x) => {
        this.orders = x;
      });
      return;
    }
    this.databaseService.getOrdersForMachineId(this.selectedMachine.machineId).subscribe((x) => {
      this.orders = x;
    });
  }

  compareMachines(c1: any, c2: any): boolean {
    return c1 && c2 ? c1.machineId === c2.machineId : c1 === c2;
  }

}

<app-additional-information-insertion></app-additional-information-insertion> <!-- Nur anzeigen, wenn noch keine Variante drinsteht-->
<div class="row">
  <div class="col-12">
    <div class="card">
      <h4 class="card-header">Auftragsübersicht
        <div class="form-inline pull-right" style="display: inline;" >
          <label style="display: inline; font-size: 1rem;" for="machine">Machine: </label>
          <select [compareWith]="compareMachines"  class="form-control form-control-sm" id="machine" required style="margin: -10px 5px -7px;" [ngModel]="selectedMachine" (ngModelChange)="changeMachine($event)">
          <option *ngFor="let machine of machines" [ngValue]="machine" [selected]="machine.machineId == selectedMachine.machineId">{{machine.name}}</option>
        </select>
        </div>
      </h4>
      <div class="card-body">
        <table class="table table-sm">
          <thead>
          <tr>
            <th scope="col">Auftrag</th>
            <th scope="col">Artikel</th>
            <th scope="col">Bezeichnung</th>
            <th scope="col">Menge</th>
            <th scope="col">Behälter</th>
            <th scope="col">Anlage</th>
            <th scope="col" ></th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let order of orders" >
            <th *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" scope="row">{{order['orderingId']}}</th>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['article']['name']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['article']['description']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['totalQuantity']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['quantityOfContainer']}} {{order['typeOfContainer']}}</td>
            <td *ngIf="order['orderFinished'] !== 1" (click)="showOrderData(order['orderingId'])" >{{order['machine']['name']}}</td>
            <td *ngIf="order['orderFinished'] !== 1">
              <button class="btn btn-block  btn-sm btn-outline-primary" *ngIf="order['orderingId'] != activeOrderId " (click)="startOrder(order)">Auftrag starten</button>
              <button class="btn btn-block  btn-sm btn-primary" *ngIf="order['orderingId'] === activeOrderId" (click)="startOrder(order)">Auftrag gestartet</button>
              <!--<span *ngIf="order['orderActive'] === 1">Läuft</span>-->
            </td>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

奥夫特拉格苏贝尔斯希特酒店
机器：
{{machine.name}
奥夫特拉格
冠词
名称
蒙哥
贝尔特
原基
{{order['orderingId']}
{{顺序['article']['name']}
{{顺序['article']['description']}
{{订单['totalQuantity']}
{{order['quantityOfContainer']}{{order['typeOfContainer']}
{{订单['machine']['name']}
奥夫特拉格星腾酒店
盖斯塔特酒店

我很感谢任何猜测或帮助，因为坦率地说，我没有想法再尝试任何东西了！

---

谢谢大家!

您能否验证getAllMachines（）是否生成可观察的 尝试在订阅块内进行控制台日志记录，并查看是否为machines数组分配了一个具有值的已定义对象

 this.databaseService.getAllMachines().subscribe((x) => {
   console.log(x);
          this.machines = x;
          this.machines = this.machines.sort(function(a, b) {return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0); } );
          this.machines.splice(0, 0, {machineId: -1, name: '-------------'});
        });

---

你能试试安全导航操作符

{{{order？.article？.name}}

。执行语句时，

order

对象也可能没有属性

article

。