angular - 当其中一个具有异步管道时，如何在两个条件下实现和 ngif

Question

我有一个组件可以接收 [患者] 或 [患者 ID] 作为 @Input 参数

• selectedPatient当它来自搜索结果时有一个值
• viewOrdersClientId当它来自另一个页面时有一个值

目前我正在以这种方式显示一个或另一个（作为一种解决方法）

<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具有多个条件并传递所需值之一，类似于以下内容：

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

当我这样做时，我收到此错误：

“PatientComponent”类型上不存在属性“患者”

有什么方法可以实现只有一个wss-patient-detail-component而不是我目前的方法？

标签： angulartypescript

Answer 1

通常，您可以使用 *ngIf 和 pattien 创建“onfly”对象并作为参数传递

<!--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>