Estoy trabajando en la creación de un conjunto de filtros, por lo que solo intento utilizar el contenido de la matriz salesChannels en mi vista, que solo se completa al hacer clic en el botón con la función test(). El inicio de sesión en ngOnInit genera una matriz vacía la primera vez, pero funciona correctamente después de presionar el botón. getOrganisationChannels devuelve un observable.
¿Qué causa este comportamiento y cómo lo manejo correctamente? Intenté usar un eventEmitter para intentar activar el relleno, pero eso no funciona.
MECANOGRAFIADO
export class SalesChannelFilterComponent implements OnInit { constructor( public organizationService: OrganizationService ) { } @Input() organizationId: any; salesChannels: Array<any> = []; selectedChannels: Array<any> = []; allSelected: Array<any> = []; ngOnInit() { this.getChannels(); console.log(this.salesChannels); } getChannels() { this.organizationService.getOrganizationChannels(this.organizationId).subscribe( salesChannels => { this.salesChannels = salesChannels; }) } test() { console.log(this.salesChannels); } }HTML
<div> {{ salesChannels | json }} </div> <button (click)="test()">test</button> <div *ngFor="let channel of salesChannels; let i = index;" class="checkbox c-checkbox"> <label> <input type="checkbox"> <span class="fa fa-check"></span>{{channel.name}} </label> </div>Este es el comportamiento esperado ya que está completando el canal de salesChannel en la suscripción de un Observable. Se recomienda que use aysnc pipe para permitir que angular verifique los cambios y actualice la vista en consecuencia.
Componente.ts:
export class SalesChannelFilterComponent implements OnInit { constructor( public organizationService: OrganizationService ) { } @Input() organizationId: any; salesChannels$!: Observable<Array<any>>; selectedChannels: Array<any> = []; allSelected: Array<any> = []; ngOnInit() { this.getChannels(); console.log(this.salesChannels); } getChannels() { this.salesChannels$ = this.this.organizationService.getOrganizationChannels(this.organizationId); } test() { console.log(this.salesChannels); } }En tu plantilla:
<button (click)="test()">test</button> <div *ngFor="let channel of salesChannels$ | async; let i = index;" class="checkbox c-checkbox"> <label> <input type="checkbox"> <span class="fa fa-check"></span>{{channel.name}} </label> </div>Más detalles: https://angular.io/api/common/AsyncPipe