访问继承接口的属性时出现 html 错误。角

Question

我正在使用 Angular 17，我有以下问题：

我有一个 IDetails 接口，它有一些属性：

export interface IDetails {
  summary: Summary;
  description: string;
}

我还有另一个接口，它继承自 IDetails 并实现一个特定于它的新属性。

export interface ICertificate extends IDetails {
  url: string;
}

在我的 Angular 组件中，我通过输入收到此接口的数组：

export class DetailsComponent implements OnInit {
  @Input({required: true}) public inputDetail: Array<IDetails> = [];
}

现在，在 html 中，当接收这个数组时，我执行一个 for 循环，并将 url 字段传递给子组件

@for (item of inputDetail; track $index) {
    ...
      @defer (on viewport) {
        <app-validation [inputValidation]="**item?.url**"></app-validation>
      } @placeholder {
        <section>
          <h4>Loading...</h4>
        </section>
      } @error {
        <section>
          <h4>Error, Try Again.</h4>
        </section>
      }
}

正是在我尝试传递 url 属性的这一行，发生了错误：

“IDetails | 类型”上不存在属性“url” I证书'。 类型“IDetails”上不存在属性“url”

如何解决这个问题并正确访问属性并将其发送给子组件？

我尝试将两种类型的值放入这个接收到的属性中。没有成功。

export class DetailsComponent implements OnInit {
  @Input({required: true}) public inputDetail: Array<IDetails> | Array<ICertificate> = [];
}

Answer 1

您可以尝试使用 TypeScript 的类型断言

<app-validation [inputValidation]="(item as ICertificate).url"></app-