2

问题是当使用 将枚举与视图模板绑定时@Input，枚举被解析为undefined. 组件：

enum FormAction {
  Insert,
  Update
}    
@Component({
  selector: 'app-member-editor',
})
export class MemberEditorComponent implements OnInit {
  modes = FormAction;

  @Input('mode') mode: FormAction;

  ngOnInit() {
    console.log(this.mode);
  }
}

视图模板：

<app-member-editor [mode]="modes.Insert"></app-member-editor>

控制台：

Cannot read property 'Insert' of undefined
4

2 回答 2

2

您正在尝试modes.Insert在父 html 中从父组件发送到子组件，而我们只能访问父 html 中的父公共属性，而不是子属性。所以你应该首先在父组件中定义它并在它的html中使用它并将定义的数据从父组件发送到子组件。

在父母中不是在孩子中：

public modes = FormAction;
于 2018-11-27T06:59:02.557 回答
2

声明一个组件属性类型FormAction不设置属性值仍然属性值undefined只是内联模式属性

应用组件

  modes = FormAction.Insert;

模板

 <app-member-editor [mode]="modes.Insert"></app-member-editor>

或者您可以使用 get 属性访问 FormAction 枚举

应用组件

  get modes() {
    return FormAction
  }

模板

  <app-member-editor [mode]="modes.Insert"></app-member-editor>

模式属性必须在 AppComponent 中声明，而不是在 MemberEditor 组件中作为我在 appComponent 模板中的示例，您可以访问 AppComponent 的所有属性，就像您在 AppComponent 的范围或上下文中一样，您没有的方式访问 MemberEditor 组件中的属性

但是如果你创建一个模板变量是可能的（不推荐）

<app-member-editor [mode]="mEditor.modes.Insert" #mEditor></app-member-editor>

演示

于 2018-11-27T06:58:15.630 回答