使用枚举类型访问对象属性

Question

我正在尝试使用枚举访问对象属性（不确定这是正确的方法），并且我会收到此错误

没有超载与此调用匹配。超载1 of 2，'（componentType： 类型，选项？：{index？：号码|不明确的;注射器？： 喷油器|不明确的; ngmoduleref？：ngmoduleref |不明确的; projectablenodes？：node [] [] |不明确的; } |不明确的）： componentRef＆lt; ...＆gt;'，给出以下错误。 类型'{modalType：模态的参数;组件：AddNewuserModalComponent类型;标题：字符串; }'不能分配给 类型“类型”的参数。

基本上，当我打开模态时，我只想发送一个参数，例如模态。add_new_user，并基于此属性名称从modaltypes访问对象，以便我可以拥有组件和标题。

export enum Modals {
    ADD_NEW_USER,
    DELETE_CLASS,
    DELETE_STUDENT,
    BLOCK_STUDENT,
    ADD_NEW_CLASS, 
    CLASS_PROFILE,
    EDIT_CLASSROOMS
}

export const MODAL_TYPES =  {
    ADD_NEW_USER: {component: AddNewUserModalComponent, title: "Add New User"},
    DELETE_CLASS: {component: DeleteClassModalComponent, title: "Delete Class"},
    DELETE_STUDENT: {component: DeleteStudentModalComponent, title: "Delete Student"},
    BLOCK_STUDENT: {component: BlockStudentModalComponent, title: "Block Student"},
    ADD_NEW_CLASS: {component: AddNewClassModalComponent, title: "Add new class"},
    CLASS_PROFILE: {component: ClassProfileModalComponent, title: "Class Profile"},
    EDIT_CLASSROOMS: {component: EditClassroomModalComponent, title: "Edit Classrooms"},
}

我希望能够使用枚举类型访问对象的模态容器，

export class ModalContainerComponent implements OnInit {
  @ViewChild('modalContent', {
    read: ViewContainerRef
  })
  modalContent!: ViewContainerRef;
  modalTypes = MODAL_TYPES;

  constructor(
    @Inject(MAT_DIALOG_DATA) public modalType: any,
    private viewContainerRef: ViewContainerRef) {
  }

  ngOnInit(): void {
    console.log(this.modalType)
    // const modal = ModalTypes[this.modalType];
    this.viewContainerRef.createComponent(this.modalTypes[this.modalType]);
  }
}

也尝试像这样创建我的对象，

export const MODAL_TYPES = [
    {
        modalType: Modals.ADD_NEW_USER,
        component: AddNewUserModalComponent,
        title: "Add New User"
    },
    {
        modalType: Modals.ADD_NEW_USER,
        component: AddNewUserModalComponent,
        title: "Add New User"
    }
]

但我仍然不知道如何根据枚举访问每个对象

我 使用模式枚举的对象属性？

Answer 1

enum在运行时是一个数字，您的定义方式。

这些是字符串。它们没有神奇的关联。

export const MODAL_TYPES =  {
    ADD_NEW_USER: {component: AddNewUserModalComponent, title: "Add New User"}
...
}

您需要参考enum value 在定义modal_types时

 [Modals.ADD_NEW_USER] : { component....

或查看字符串enums enum x {y =“ mystring”}，但是您仍然想进行上述更改，而不是依赖字符串的隐式相关性。您总是可以记录事物以查看发生的事情，您会发现您以模态类型的传递是数字，而您查找的对象在钥匙中的对象将没有匹配的键。