Блог

В приложении angular 12 (с использованием машинописного текста) в файле «houseobject.ts» есть объект значения, определенный как:

 export class houseValue {
  houseCodeAndDesc: string;
  numberBedrooms: number;
}
 

JSON для значения дома выглядит следующим образом:
Стоимость дома {
Код и номер дома: «10005 — Квартира из коричневого камня»
Количество комнат: «8»
}

К сожалению, информация о коде и адресе дома должна быть разбита на код дома и описание дома (поэтому код дома: 10005, код дома: Квартира в коричневом доме).

Я создал новый объект value, как показано ниже, в файле с именем houseobject2.ts:

 export class houseValueBrokenUp{
 houseCode: string;
 houseDesc: string;
 numberBedrooms: number;
 }
 

Я пытался сопоставить данные из houseValue в houseValueBrokenUp, как показано ниже:

 export class houseTable {
 @Input() houseSummary: houseValue[];
 displayedColumns: string[] = ['houseCodeAndDesc', 'numberBedrooms'];
 houseDisplayList: houseValueBrokenUp[];
 houseDisplay: houseValueBrokenUp;
 houseDataSource: MatTableDataSource<any>;
 houseSplitDataSource: MatTableDataSource<houseDisplayList>;

@ViewChild(MatSort) sort: MatSort;

ngOnInIt() {
 if(this.houseSummary) {
    this.setInformation();
    this.houseDataSource = new MatTableDataSource(this.houseSummary);
   }
 }

 setInformation() {
 for (const value of this.houseSummary) {
  this.houseDisplay.houseCode = value.houseCodeAndDesc.substring(0,5);
  this.houseDisplay.houseDesc = value.houseCodeAndDesc.substring(6);
  this.houseDisplay.numberBedrooms = value.numberBedrooms;
  this.houseDisplayList.push(this.houseDisplay);
 }
 }
}
 

Проблема в том, когда setInformation() работает, в браузере консоль дает ошибку «ошибка типа: не удается прочитать свойства неопределены (значение подстроки)». Я верю, что это говорю, что значение в setInformation() является undefined, но когда я консоль.бревно(значения) консоль отображает данные JSON. Как правильно перенести значения из исходного объекта значения в объект значения, разделяющий код и описание дома?

Причина houseDisplay в том, что он не инициализирован, и это так undefined . Итак, вы можете инициализировать его следующим образом:

 houseDisplay: houseValueBrokenUp = {
  houseCode: '',
  houseDesc: '',
  numberBedrooms: 0
};
 

Кроме того, houseSummary не определено onInit . Пожалуйста, ознакомьтесь подробнее с жизненным циклом компонентов.

Если вы хотите настроить информацию, как только ваш контент станет доступен, вы можете использовать геттер и сеттер, как это:

 private _houseSummary: houseValue[];
houseDataSource = new MatTableDataSource([]);

get houseSummary():houseValue[]{
  return this._houseSummary;
}

set houseSummary(houseSummary:houseValue[]){
  this._houseSummary = houseSummary;
  if(this._houseSummary) {
    this.setInformation();
    this.houseDataSource.data = this._houseSummary;
  }
}
 

Я не уверен, что это работает, потому что я не тестировал напрямую, но да… в случае ошибок… взгляните на консоль и проведите хорошее исследование ошибок в Интернете.