начальное значение компонента не определено

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 ОШИБКА TypeError: Невозможно прочитать свойство 'l10n' из неопределенного

Убедитесь, что вы используете свойства value после того, как он станет доступен в html-шаблоне (*ngIf="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">
  ...