Как передать ответ API в качестве параметра @Input в угловой компонент 6

Question

У меня есть два компонента: «новый» и «история».компонент истории вызывается внутри «нового» компонента следующим образом:

<div class="col-lg-12">
   <app-leave-history [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
</div>

выше находится внутри «нового» компонента.мне нужно передать данные в свойство 'ldata' из файла "новый" компонент TS.когда я передаю данные в 'ldata' с ответом API, компонент не получает данные.потому что перед ответом API загружается компонент истории.я должен вызвать API внутри компонента истории или есть ли способ вызвать API из моего «нового» компонента и перейти к «ldata»?

Answer 1

Используйте *ngIf, чтобы дождаться завершения вызова API и инициализировать ldata.Angular будет ждать его, а затем только визуализирует app-leave-history

 <div class="col-lg-12">
   <app-leave-history 
     *ngIf="ldata && permission" 
     [LeaveData]="ldata" 
     [RoleData]="permission">
   </app-leave-history>
</div>

Предложение: Пожалуйста, рассмотрите возможность переименования ldata, LeaveData и RoleData в camelCase, т.е. lData (или leaveData, чтобы быть более понятным), leaveData и roleData.Это то, что Angular StyleGuide Предлагает:

Использовать нижний регистр верблюда для именования свойств и методов.

Answer 2

Как @SiddAjmera & @Sajeetharan предложили * ngIf часть была добавлена ​​и дополнительно я назначил ответ в событии ngOnChanges ().Теперь это работает !!!

Answer 3

Подход, который вы используете, верен, вы делаете вызов API в новом компоненте и назначаете ответ.

Передача ответа в качестве ввода для нового компонента.Чтобы передать данные после их получения, вы можете отобразить компонент истории, используя *ngIf

<div class="col-lg-12">
   <app-leave-history *ngIf="ldata && permission" [LeaveData]="ldata" [RoleData]="permission"></app-leave- history>
 </div>