Невозможно установить свойство 'title' из undefined в angular 6

Question

почему я получаю эту ошибку Невозможно установить свойство 'title' из неопределенного вот мой код https://stackblitz.com/edit/angular-pkd3qr?file=src%2Fapp%2Fapp.component.ts

import { Component } from '@angular/core';


interface DropDownModel {
  displayName: string;
  value: string;
}

interface DropdownModelWithtitle {
  title: string;
  dropDownOptions: DropDownModel[];
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  typeOfProofObj: DropdownModelWithtitle;
  constructor(){
    this.typeOfProofObj.title = "ss";
    this.typeOfProofObj.dropDownOptions = [{displayName:'ss',value:'sss'}];

  }

}

Я пытаюсь вставить значение в мою переменную, так как решить эту проблему?

Answer 1

Вы можете изменить DropdownModelWithTitle с интерфейса на класс, и установите для typeOfProofObj новое DropdownModelWithTitle ()

interface DropDownModel {
  displayName: string;
  value: string;
 }

 class DropdownModelWithtitle {
  title: string;
  dropDownOptions: DropDownModel[];
 }

 @Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
  })
 export class AppComponent  {
   name = 'Angular';
   typeOfProofObj = new DropdownModelWithtitle();
   constructor(){
     this.typeOfProofObj.title = "ss";
     this.typeOfProofObj.dropDownOptions = [{displayName:'ss',value:'sss'}];

 }

}

Answer 2

Сначала необходимо инициализировать переменную typeOfProofObj, а затем попытаться получить доступ к ее свойствам.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  typeOfProofObj: DropdownModelWithtitle = { title: null, dropDownOptions: null };

  constructor() {
     this.typeOfProofObj.title = "ss";
     this.typeOfProofObj.dropDownOptions = [ {displayName: 'ss', value: 'sss'} ];    
  }

}