angular - Birinde async pipe bulunan iki koşul ile ngIf nasıl uygulanır

Bir bileşenim var ve bu bileşen @Input parametresi olarak ya [patient] ya da [patientId] alabilir

• selectedPatient, bir arama sonucundan geldiğinde bir değere sahiptir
• viewOrdersClientId, başka bir sayfadan geldiğinde bir değere sahiptir

Şu anda bunu bu şekilde (bir geçici çözüm olarak) birini ya da diğerini gösteriyorum

<div *ngIf="selectedPatient | async as patient">
    <wss-patient-detail-component [patient]="patient">
    </wss-patient-detail-component>
</div>
<div *ngIf="viewOrdersClientId">
    <wss-patient-detail-component [patientId]="viewOrdersClientId">
    </wss-patient-detail-component>
</div>

*ngIf ile birden fazla koşula sahip olmak ve gereken değerlerden birini geçirmek istiyorum, şuna benzer bir şey:

<div *ngIf="viewOrdersClientId || (selectedPatient | async as patient)">
    <wss-patient-detail-component
    [patient]="patient" 
    [patientId]="viewOrdersClientId">
    </wss-patient-detail-component>
</div>

Bunu yaptığımda bu hatayı alıyorum :

Özellik 'patient', 'PatientComponent' türünde mevcut değil

Mevcut yaklaşımım yerine sadece bir wss-patient-detail-component elde etmenin bir yolu var mı?

Cevap #1

tipik olarak, bir nesneyi *ngIf ile 'anında' oluşturabilir ve bir argüman olarak geçirebilirsiniz

<!--see that the *ngIf is always true-->
<div *ngIf="{patient:selectedPatient | async} as data">
  <!--you get the value in "data.patient-->
  <div *ngIf="data.patient || viewOrdersClientId">
    <wss-patient-detail-component [patient]="data.patient" [patientId]="viewOrdersClientId">
    </wss-patient-detail-component>
  </div>
</div>

Cevap #2

Verilerinizin render edilmeye hazır olup olmadığını belirlemek için bir observable kullanmanızı öneririm. Bu, viewOrdersClientId'nizin yalnızca bir bileşen girişi olduğunu ve herhangi bir veri beklemediğini varsaymaktadır. Şöyle:

isReady$ = new BehaviorSubject<boolean>(false);
selectPatients: any[];


ngOnInit()
{
    ...
    const getSelectPatients = [your service to get selected patients]

    getSelectPatients.subscribe(res => 
    {
        if (viewOrdersClientId)
        {
            this.selectPatients = res;
            this.isReady$.next(true); 
        }
    });

    ...
}

O zaman HTML şablonunuzda, bileşenleri yalnızca gözlemlenebilir hazır olduğunda gösterin:

    <div *ngIf="isReady$ | async">  
        <wss-patient-detail-component
            [patient]="selectedPatients" 
            [patientId]="viewOrdersClientId">
        </wss-patient-detail-component>
    </div>

Bu, hasta değişkeninizin tanımsız olmayacağını ve wss-patient-detail-component bileşenine bir parametre olarak geçirildiğinde geçerli olmasını sağlar.