получение ошибки при обращении по идентификатору внутри ngif

Question

Надеюсь, ты поможешь мне сделать это правильно. У меня есть div с 3 метками, каждая из которых отображается в другом состоянии, и после этого у меня есть еще один div с 3 метками, которые показывают разные вещи на основе первого div, но я получаю ошибки. Я знаю, что когда элемент находится под ngif, он не отображается angular, но в какой-то момент я делаю условие истинным, так как бы это сделать?

<div>
   <label>Direccion: &nbsp;</label>
   <label *ngIf="selectedPerson.localPersonas?.length === 0">No hay locales registrados</label>
   <label *ngIf="selectedPerson.localPersonas?.length === 1">{{selectedPerson.localPersonas[0].direccion}}</label>
   <mat-form-field *ngIf="selectedPerson.localPersonas?.length > 1">
       <mat-label>Selecciona una direccion</mat-label>
       <mat-select #locales>
       <mat-option *ngFor="let local of selectedPerson.localPersonas" [value]="local"
                    [(ngModel)]="selectedPerson.localPersonas[0]" ngDefaultControl>
                    {{local.direccion}}</mat-option>
       </mat-select>
   </mat-form-field>
</div>

<div>
   <label>Telefonos: &nbsp;</label>
   <label *ngIf="selectedPerson.localPersonas?.length === 0">No hay telefonos registrados</label>
   <label *ngIf="selectedPerson.localPersonas?.length === 1">{{selectedPerson.localPersonas[0].direccion}}</label>
   <mat-form-field *ngIf="locales && locales.value.localPersonas.length > 1">
       <mat-label>Selecciona un telefono</mat-label>
       <mat-select>
            <mat-option *ngFor="let telefono of locales.value.telefonoLocals" [value]="telefono"
                    [(ngModel)]="locales.value.telefonoLocals[0].numero" ngDefaultControl>
                    {{telefono.numero}}</mat-option>
       </mat-select>
   </mat-form-field>
</div>

Проблема возникает, когда в первом div ссылка "locales" не существует после первого запуска, поэтому, когда я создаю ngif на основе этой ссылки, отображается ошибка. Но после вызова функции в моем ts массив localPersonas не является неопределенным, и, следовательно, доступны справочные "locales". Каким образом можно выполнить sh это? Заранее спасибо

Answer 1

Если selectedPerson и locales являются основными свойствами вашего шаблона, вы можете добавить ng-контейнер вокруг всех ваших тегов.

<ng-container *ngIf="selectedPerson && locales">

...your tags here...

</ng-container>

С этими двумя условиями вы будете уверены, что ваши основные свойства доступны.