无法读取 Object.eval angular 处未定义的属性

Question

我正在尝试从 combobox 获取数据并在文本框中打印数据，例如根据用户 ID，通过从 combobox 中选择其 ID 在文本框中打印用户名，希望您能理解并且很好写的，我的英文不是很好

我试试这个...

html组件

  <mat-select  [(ngModel)]="examen.rutPac" name="rutPac">
    <mat-option *ngFor="let pacientes of pacientes" name="rutPac" [value]="pacientes.rutPac">
      {{pacientes.rutPac}}
    </mat-option>

            <input matInput [(ngModel)]="selectedPaciente.nombrePac" #elementDescripcionControl="ngModel"
        type="text" name="NombrePac" placeholder="Nombre Paciente" maxlength="30" readonly>

组件 ts

  getOnePaciente = (pac) => {
    this.dataService.getOnePaciente(pac.id).subscribe(
      (data: Paciente) => {
        this.selectedPaciente = data; 
        console.log('JSON DATA --->', data); 
      },
      error => {
        console.log(error);
      }
    );
  }

  getPacientes(): void {
    this.dataService
      .getPacientes()
      .then(pacientes => this.pacientes = pacientes);
  }

"the model"
   pacientes:Paciente[];

Answer 1

你可以用? 要使未定义的变量可选，这被@Mostafa 指出为“安全导航”：

[(ngModel)]="selectedPaciente?.nombrePac"

喜欢：

 <input matInput [(ngModel)]="selectedPaciente?.nombrePac" #elementDescripcionControl="ngModel"
        type="text" name="NombrePac" placeholder="Nombre Paciente" maxlength="30" readonly>

? 未分配selectedPaciente时可能有助于避免错误

或*ngIf ：

<div *ngIf="selectedPaciente">
<input matInput [(ngModel)]="selectedPaciente.nombrePac" #elementDescripcionControl="ngModel"
        type="text" name="NombrePac" placeholder="Nombre Paciente" maxlength="30" readonly>
</div>

Answer 2

确保首先在您的应用模块中导入 FormsModule。 然后您可以使用“安全导航运算符 (?)”和 null 属性路径来使未定义的变量成为可选。