为什么我的Angular模板会抛出这个Typescript错误？ [英] Why is my Angular template throwing this Typescript error?

问题描述

我正在 Typescript 2.3.4 中构建一个 Angular 4 项目。我无法弄清楚下面的代码有什么问题。

I'm building an Angular 4 project in Typescript 2.3.4. I can't figure out what's wrong with the code below.

IDialog界面

export interface IDialog{
    cancellable?: boolean,     

    inputs?: Array<{label: string, value?: any, description?: string}|string>
    message: string
    title?: string,
    type?: DialogInputTypes // <- an Enum
}

SampleComponent.ts

  public dialog:IDialog = {
    cancellable:false,
    title:'Dialog Title',
    message:'This is a modal dialog',
    type:DialogInputTypes.button,
    inputs:[
      {label:'OK', value:'OK'},
      {label:'Cancel', value:'Cancel'}
    ]
  };

SampleComponent.html

<input *ngFor="let input of dialog.inputs" [value]="input.value">
                                                    ^^^^^^^^^^^^

此错误由以下引发：编译器：

This error is thrown by the compiler:

Angular：未定义标识符'value'。 < anonymous> 不包含此类会员

我刚从 Angular 2 ， Typescript 2.0 ，之前没有出现此错误。

I just upgraded from Angular 2 with Typescript 2.0 and this error was not present before.

为什么会抛出此错误？也许它与IDialog.inputs被定义为数组或字符串的事实有关，并且在编译时编译器无法知道哪些形状输入具有。如果我从界面中删除 | string ，则错误消失。

Why is this error thrown? Perhaps it has to do with the fact that IDialog.inputs is defined as either an array or a string, and at compile time there is no way for the compiler to know which shape inputs has. If I remove |string from the interface, the error goes away.

更重要的是，我不知道如何修复我的代码。

More importantly, I don't know how to fix my code.

推荐答案

从VS代码中禁用角度扩展包和角度语言服务插件。

Disable angular extension pack and angular language service plugins from VS code.

我有类似的问题，这解决了它。

I had a similar problem and this solved it.

这篇关于为什么我的Angular模板会抛出这个Typescript错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！