多类型角模板参考对象

Question

我有一个对象绑定到模板。该对象有两种类型。

const config: IDialogConfig | IDialogConfig[];

我的模板看起来像这样。

<ng-container *ngIf="isArray(config); else singleMessage">
    <ng-container *ngFor="let message of config">
        <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
    </ng-container>
</ng-container>
<ng-template #singleMessage>
    <p [fieldKey]="config.fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

现在，通过这种设置，我在#singleMessage模板中得到了一个错误

属性'fieldID‘在'IDialogMessage[]’类型上不存在

不管怎样，我可以让这个装置正常工作吗？我不想使用any类型。

Answer 1

您可以保持配置类型不变，但在模板中，可以使用$any()方法来处理此错误：

<ng-container *ngIf="isArray(config); else singleMessage">
    <ng-container *ngFor="let message of config">
        <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
    </ng-container>
</ng-container>
<ng-template #singleMessage>
    <p [fieldKey]="$any(config).fieldKey" class="display-4 confirm-msg"></p>
</ng-template>

Answer 2

由于我们不能在模板中使用运算符，所以很难在模板中转换类型，我可以想到的一种方法是：

在组件中包含以下代码：

  asDailogConfig(value) : IDialogConfig { return value; }

然后在模板中：

<p [fieldKey]="(asDailogConfig(config)).fieldKey" class="display-4 confirm-msg"></p>

Answer 3

我会创建一个吸气剂，例如IDialogConfig[]类型的configArr

const config: IDialogConfig | IDialogConfig[]

get configArr(): IDialogConfig[] {
  return [this.config ?? []].flat()
}

然后在我们看来：

<ng-container *ngFor="let message of configArr">
  <p [fieldId]="message.fieldKey" class="display-4 confirm-msg"></p>
</ng-container>

• 检查工作示例斯塔克布利茨