如何在 Angular 中定义嵌套对象模型？

Question

类型TeamMembersDropdownDto[] 上不存在属性roleDto。因为我想将this.model.teamMembersDto.roleDto 分配给teamMembersDto，如下所示。我们在teamMembersDto下的对象roleDto数组。

但它给了我上面的错误 roleDto 不存在于类型 TeamMembersDropdownDto[] 上，但由于它是嵌套的，我如何将 roleDto 添加到 TeamMembersDropdownDto[] 或 TeamDto 它应该在 @ 987654332@?感谢您的任何回复。

#数据

[
  {
    "id": 10011,
    "name": "TESTING TEAM",
    "description": "THE TEST TEAM",
    "memberCount": 2,
    "accountId": 4,
    "status": "Active",
    "createOnString": null,
    "teamMembersDto": [
      {
        "id": 10017,
        "firstName": "Alexa",
        "lastName": "Ryan",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
          {
            "id": 6,
            "name": "COVP",
            "isShow": true,
            "transactionRoleId": 9
          },
          {
            "id": 7,
            "name": "DVP Real Estate",
            "isShow": true,
            "transactionRoleId": 6
          }
        ]
      },
      {
        "id": 10018,
        "firstName": "Briana",
        "lastName": "Christoval",
        "title": null,
        "memberId": 2,
        "roleDto": [
          {
            "id": 8,
            "name": "Architect",
            "isShow": true,
            "transactionRoleId": 12
          },
          {
            "id": 9,
            "name": "Construction Project Director",
            "isShow": true,
            "transactionRoleId": 11
          }
        ]
      }
    ],
    "teamTransactionDetailsDto": []
  },
]

#dto模型代码

export class TeamDto {
  id: number;
  name: string;
  description: string;
  accountId: string;
  status: string;
  teamMembersDto: TeamMembersDropdownDto[];
  teamTransactionDetailsDto: TeamTransactionDetailsDto[];
}

#main组件代码

import { TeamDto } from 'src/app/core/models/teams/team-dropdown-dto'
model = new TeamDto();

ngOnInit(): void {
  this.getTeamGeneralDetails();
}

getTeamGeneralDetails() {
  this.isInProgress = true;
  this._teamService
    .getTeamsGeneralDetails(this.teamId)
    .pipe(finalize(() => (this.isInProgress = false)))
    .subscribe({
      next: (res) => {
        if (res.isSuccess) {

          this.model = res.data
          this.membersForm = this._createModelForm();

        }
      },
      error: (err) => this._notificationService.showError(err),
      complete: noop,
    });
}
    
 private _createModelForm(): FormGroup {
  return this.fb.group({
    id: [this.model.id || 0],
    teamMembersDto: [this.model.teamMembersDto.roleDto || []],
    teamTransactionDetailsDto: [this.model.teamTransactionDetailsDto || []]
  });
}

Answer 1

如果我们想要给定团队可用的所有角色，我们可以将它们减少如下。

const roles = data.reduce(
  (teamRoles, team) =>
    team.teamMembersDto.reduce(
      (memberRoles, member) => [...memberRoles, ...member.roleDto],
      teamRoles
    ),
  []
);

Answer 2

解决方案 1

作为@Ramesh 回答的参考，您可以通过flat 数组从teamMembersDto 获取roleDto，如下所示：

private _createModelForm(): FormGroup {
  const roles = this.model.teamMembersDto.reduce(
    (teamMembers, member) => [...teamMembers, ...member.roleDto],
    []
  );

  console.log("Roles: ", roles);

  return this.fb.group({
    id: [this.model.id || 0],
    teamMembersDto: [roles || []],
    teamTransactionDetailsDto: [this.model.teamTransactionDetailsDto || []]
  });
}

---

解决方案 2

或者，您也可以使用 (reduce and concat) 方式：

private _createModelForm(): FormGroup {
  const rolesByTeam = this.model.teamMembersDto.map(teamMember => {
    return teamMember.roleDto.reduce((roles, role) => roles.concat(role), []);
  });

  const roles = rolesByTeam.reduce((arr, role) => arr.concat(role), []);

  console.log("Roles by team: ", rolesByTeam);
  console.log("Roles: ", roles);

  return this.fb.group({
    id: [this.model.id || 0],
    teamMembersDto: [roles || []],
    teamTransactionDetailsDto: [this.model.teamTransactionDetailsDto || []]
  });
}

Sample Solution on StackBlitz

---

参考

Array.prototype.flat() (Reduce and concat section)

Answer 3

那么，您想从当前存在于Array of data[] 中的teamMembersDto[] 中获取roleDto[]，对吗？请查看此解决方案

let data = [
  {
    id: 10011,
    name: 'TESTING TEAM',
    description: 'THE TEST TEAM',
    memberCount: 2,
    accountId: 4,
    status: 'Active',
    createOnString: null,
    teamMembersDto: [
      {
        id: 10017,
        firstName: 'Alexa',
        lastName: 'Ryan',
        title: 'COO',
        memberId: 1,
        roleDto: [
          {
            id: 6,
            name: 'COVP',
            isShow: true,
            transactionRoleId: 9
          },
          {
            id: 7,
            name: 'DVP Real Estate',
            isShow: true,
            transactionRoleId: 6
          }
        ]
      },
      {
        id: 10018,
        firstName: 'Briana',
        lastName: 'Christoval',
        title: null,
        memberId: 2,
        roleDto: [
          {
            id: 8,
            name: 'Architect',
            isShow: true,
            transactionRoleId: 12
          },
          {
            id: 9,
            name: 'Construction Project Director',
            isShow: true,
            transactionRoleId: 11
          }
        ]
      }
    ],
    teamTransactionDetailsDto: []
  }
];


let roleDto = data[0].teamMembersDto.map((item) => item.roleDto);
console.log(roleDto) // It will be an array of roleDto

在您的组件代码中，您创建了像这样model = new TeamDto(); 的变量，似乎tihs 模型将是单个Object 而不是Array，但是您的数据是一种array 而不是object

#data

[
  {
    "id": 10011,
    "name": "TESTING TEAM",
    "description": "THE TEST TEAM",
    "memberCount": 2,
    "accountId": 4,
    "status": "Active",
    "createOnString": null,
    "teamMembersDto": [
      {
        "id": 10017,
        "firstName": "Alexa",
        "lastName": "Ryan",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
          {
            "id": 6,
            "name": "COVP",
            "isShow": true,
            "transactionRoleId": 9
          },
          {
            "id": 7,
            "name": "DVP Real Estate",
            "isShow": true,
            "transactionRoleId": 6
          }
        ]
      },
      {
        "id": 10018,
        "firstName": "Briana",
        "lastName": "Christoval",
        "title": null,
        "memberId": 2,
        "roleDto": [
          {
            "id": 8,
            "name": "Architect",
            "isShow": true,
            "transactionRoleId": 12
          },
          {
            "id": 9,
            "name": "Construction Project Director",
            "isShow": true,
            "transactionRoleId": 11
          }
        ]
      }
    ],
    "teamTransactionDetailsDto": []
  },
]

我相信您在getTeamGeneralDetails() 中获取的数据是Object 而不是Array，

所以在Object的情况下，上述问题的解决方案是这样的

let data = {
    id: 10011,
    name: 'TESTING TEAM',
    description: 'THE TEST TEAM',
    memberCount: 2,
    accountId: 4,
    status: 'Active',
    createOnString: null,
    teamMembersDto: [
      {
        id: 10017,
        firstName: 'Alexa',
        lastName: 'Ryan',
        title: 'COO',
        memberId: 1,
        roleDto: [
          {
            id: 6,
            name: 'COVP',
            isShow: true,
            transactionRoleId: 9
          },
          {
            id: 7,
            name: 'DVP Real Estate',
            isShow: true,
            transactionRoleId: 6
          }
        ]
      },
      {
        id: 10018,
        firstName: 'Briana',
        lastName: 'Christoval',
        title: null,
        memberId: 2,
        roleDto: [
          {
            id: 8,
            name: 'Architect',
            isShow: true,
            transactionRoleId: 12
          },
          {
            id: 9,
            name: 'Construction Project Director',
            isShow: true,
            transactionRoleId: 11
          }
        ]
      }
    ],
    teamTransactionDetailsDto: []
  };


let roleDto = data.teamMembersDto.map((item) => item.roleDto);
console.log(roleDto) // It will be an array of roleDto

Answer 4

for(let item of this.model.teamMembersDto) {
  for(let item1 of item.roleDto) {
    here you can access the roleDto