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

Question

我正在构建一个 Angular 4项目在 Typescript 2.3.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: Identifier 'value' is not defined. <anonymous> does not contain such a member

我刚刚从 Angular 2 升级与 Typescript 2.0并且此错误之前不存在。

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

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

Answer 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我修改为了更具体