为什么我的 Angular 模板会抛出这个 Typescript 错误？答案

【问题标题】：Why is my Angular template throwing this Typescript error?为什么我的 Angular 模板会抛出这个 Typescript 错误？
【发布时间】：2017-12-08 11:03:04
【问题描述】：

我正在Typescript 2.3.4 中构建一个Angular 4 项目。我不知道下面的代码有什么问题。

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">
                                                    ^^^^^^^^^^^^

编译器抛出此错误：

Angular：未定义标识符“值”。 <anonymous> 不包含这样的成员

我刚刚从Angular 2升级到Typescript 2.0，之前没有出现这个错误。

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

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

【问题讨论】：

我想知道[value]="input.value"是否应该是[value]="input?value"，因为它是在接口中声明的。
谢谢。使用input?.value 没有区别。我认为错误与IDialog.inputs 被定义为数组或字符串这一事实有关，并且在编译时编译器无法知道inputs 具有哪种形状。我只是在猜测
我同意@BeetleJuice，我怀疑它与作为IDialog 接口一部分的“|string”有关。您需要将其转换为正确的类型。
我认为这不是问题所在。不过它很容易测试，只需删除 |string 并查看错误是否仍然存在。
@HarryNinh 如果我删除|string，错误就会消失，但这不是解决方案，因为有时该成员是一个字符串。因此，进行此更改会在其他地方引发错误。

标签： angular typescript interface

【解决方案1】：

绝对是你的项目配置如果像这样，您的代码可以正常工作

@Component({
   template: `
       <input *ngFor="let input of dialog.inputs" [value]="input.value">
   `
})
export class WhateverComponent{
    public dialog:IDialog = {
        inputs:[
            {label:'OK', value:'OK'},
            {label:'Cancel', value:'Cancel'}
        ]
    };
}
export interface IDialog{
    inputs: Array<iSomeControl | string >;
}
export interface iSomeControl{
    label: string;
    value: string;

}

我正在使用 Angular 4.0.2 Typescript 2.2.2 为了更具体，我进行了修改

【讨论】：

改变界面不是我想要的解决方案。 OP 中编写的界面显示IDialog.inputs 的正确形状。有时它是一个数组，有时它是一个字符串。如果我只是将其更改为Array<any>，则会在将inputs 用作字符串的其他地方抛出错误
我不是专家，但标签、值、描述是匿名数组还是特定类型？我的猜测是，如果它们是匿名的，编译器不知道如何在匿名数组或字符串之间进行选择
这对我来说是用简单的字符串发生的：{value:string, message: string, description:string}[]

【解决方案2】：

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

我遇到了类似的问题，这解决了。

【讨论】：

我不想这样做，因为我发现 Angular 语言服务非常有价值：它允许在我编写模板时自动完成和类型检查组件属性。正是这种特殊情况让我觉得很烦人。我想我从typescript 2.3.4 降级到typescript 2.3.3 来解决这个问题，但我记不太清楚了。