не может прочитать свойство неопределенной angular 6 * ngIf проблемы

Question

В моем приложении angular 6. html файл У меня есть код как показано ниже

<div *ngIf="checkForStatus()" class="row">
         .......
</div>

и в файле .ts, у меня есть код, как показано ниже:

    @Input() values: OrderResponse;
    checkForStatus() {
      this.values.signers.forEach((ele)=>{
      ...................  
       return ....something.
     }
}

Здесь я получаю значение из функции файла ts в HTML, но есть консольные ошибки, говорящие о том, что не может прочитать свойства подписчиков ** undefined . **

, поэтому я изменяю логи c шаблона, как показано ниже:

<div *ngIf="values.signers">
<div *ngIf="checkForStatus()" class="row">
             .......
    </div>
</div>

только что обернул код div с * ngIf, это работает хорошо? но это подходящая ситуация? я что-то здесь упускаю? может быть плохая практика?

Обратите внимание, что я использую @Input значения непосредственно в html файле.

Answer 1

Аналогично тому, что предложил Омар Мохамед, но вместо этого я использовал {}.

@Input() values: OrderResponse = {}; 

Answer 2

Кажется, проблема в том, что this.values устанавливается не во всех ситуациях. Поэтому, когда вы смотрите на свой код, когда вы инициализируете this.values?

, я бы предположил, что он в настоящее время заполняется асинхронно (это означает, что родитель не может предоставить значение во время создания). В результате при создании компонента первый рендеринг произойдет до заполнения this.values. Затем, через несколько миллисекунд, значение присваивается.
Из-за этого второе решение работает, а первое - нет. В первом он взрывается, потому что при первом рендеринге значение недоступно.

Для этого у вас есть несколько способов решения проблемы. Вы можете попытаться бороться с симптомом и проверить, доступно ли необходимое значение, а если нет, вернуть приемлемое значение

checkForStatus() {
  if(!this.values){
    return false;
  }
this.values.signers.forEach((ele)=>{
  ...................  
   return ....something.
}

Или вы можете проанализировать источник проблемы и проверить, является ли асинхронный характер необходимо.

Например, родитель может добавить дочерний компонент в DOM только при наличии каждого значения.

<childComponent [values]="this.values" *ngIf="this.values"></childComponent>

Решение очень зависит от того, чего вы хотите достичь и как внешний вид должен быть.

Answer 3

Это потому, что входные свойства заполняются до вызова ngOnInit(). Когда вы обращаетесь к нему с помощью *ngIf, оно все равно undefined. Таким образом, вы можете присвоить значение свойству при объявлении:

@Input() values: OrderResponse = {};

Answer 4

Кажется, что values ​​ свойство не определено. В шаблоне вы можете предотвратить эту ошибку следующим образом:

<div *ngIf="values?.signers"></div>

В классе компонентов:

checkForStatus() {
  if(this.values) {
    // here values property is defined
  }
}