组件的初始值未定义

Question

selectedProdGrp.ProductGroupNames 为 null，因为尚未提取数据。我将接口 MultiLangTxtModel 定义为自定义类型，但我不确定这是否是正确的方法。

我在控制台中收到以下错误：

NamesComponent.html:9 ERROR TypeError: Cannot read property 'l10n' of undefined

我做错了什么？

names.components.ts

 import { Component, Input, Output, EventEmitter } from '@angular/core';

    @Component({
      selector: 'field-names',
      templateUrl: './names.component.html',
      styleUrls: ['./names.component.scss']
    })
    export class NamesComponent {
      @Input('disabled') editMode;
      @Input() value: MultiLangTxtModel;
      @Output() value2 = new EventEmitter<MultiLangTxtModel>();

      constructor() {
         this.value = {l10n:{de:null,en:null,fr:null,it:null}} //didnt help
      }

      onChange() {
        this.value2.emit(this.value);
      }
    }

names.component.html

        <div class="item noBottom" [ngClass]="{
      'has-danger': nameEn.invalid || nameFr.invalid || nameDe.invalid || nameIt.invalid,
      'has-success': nameEn.valid && nameFr.valid && nameDe.valid && nameIt.valid
    }">

<div class="d-flex" [ngStyle]="{'display': (lang != 'en' && lang !='*') ? 'none !important' : 'inherit'}">
  <div class="col-md-2 label" i18n="@@tables.general.name">Name {{lang}}</div>
  <div class="col-md-1 flag en"></div>
  <div class="col-md-9">
    <input type="text" class="form-control" accesskey="e" id="nameEn" placeholder="Name" required alphaNumValidator [(ngModel)]="value.l10n.en" (click)="onChange()" name="nameEn" #nameEn="ngModel" [disabled]="!editMode">
    <div *ngIf="nameEn.errors && (nameEn.dirty || nameEn.touched)" class="form-control-feedback" >
      <p *ngIf="nameEn.errors.alphaNum" class="alert alert-danger"><span i18n="@@tables.general.name">c</span>&nbsp;<span i18n="@@tables.error.alphaNum">a</span></p>
    </div>
  </div>
</div>
</div>

app.d.ts

interface MultiLangTxtModel {
    l10n: {
        de:string,
        en:string,
        fr:string,
        it:string
    }
}

AppComponent.component.html

<div class="row panel header">
  <div class="col-md-4 itemBox">
    <field-names [value]="selectedProdGrp.ProductGroupNames" (value2)="onNamesChange($event)"></field-names> 
  </div>
</div>

Answer 1

您正试图从构造函数内部的输入中获取数据。解构分配似乎也是错误的。构造函数不是Angular生命周期钩子的一部分，此时（constructor内部）输入值为undefined，尝试将其放入ngOnInit生命周期钩子内部：

ngOnInit() {
  { l10n: { de: null, en: null,fr: null, it: null } } = this.value;
  console.log(l10n);
}

NamesComponent.html:9 ERROR TypeError: Cannot read property 'l10n' of undefined

确保您在使用 html 模板 (*ngIf="value") 后使用 value 的属性：

<div class="col-md-9" *ngIf="value">
  <input type="text" class="form-control" accesskey="e" id="nameEn" placeholder="Name" required alphaNumValidator [(ngModel)]="value.l10n.en" (click)="onChange()" name="nameEn" #nameEn="ngModel" [disabled]="!editMode">
  ...