Angular TypeError：无法读取 null 的属性“用户”

Question

我有一个组件通过 @Input() 装饰器接收关于组的数据。我的目标是在组件初始化期间根据组数组中的数据创建一个新的对象数组。这是我的 TS 组件部分：

import { Component, OnInit, Input } from '@angular/core';

import {Group} from "@models/group.model";

@Component({
  selector: 'app-group-admins',
  templateUrl: './group-admins.component.html',
  styleUrls: ['./group-admins.component.css']
})
export class GroupAdminsComponent implements OnInit {
  @Input() group: any = new Group();
  users: Array<object> = [];
  constructor() { }

  ngOnInit() {
    this.users = this.group.users.map((a: { user: number; permissions: number; }) => ({id: a.user, permissions: a.permissions}));
  }

  getUsers() {
    this.users = this.group.users.map((a: { user: number; permissions: number; }) => ({id: a.user, permissions: a.permissions}));
  }
}

这是我的 Group 和 GroupUser 模型（如果需要）：

import {GroupUser} from "@models/group-user.model";

export class Group {
  group_name: string;
  type: string;
  avatar?: string;
  header?: string;
  address?: string;
  date?: string;
  city?: string;
  about?: string;
  verify_status?: string;
  site?: string;
  phone?: string;
  email?: string;
  web_site?: string;
  industry?: true;
  directions_list?: string;
  users: Array<GroupUser>
}

export class GroupUser {
  id?: number;
  user: number;
  permissions: string;
  confirmed?: boolean;
}

这是我的父 TS 组件部分：

group = [];
ngOnInit() {
this.route.paramMap.subscribe(() => {
  this.id = this.route.snapshot.paramMap.get("id");
  this.groupService.getSpecGroup(this.id).subscribe(
    ((info) => {
      this.group = info;
    })
  );
});
}

还有 HTML 部分：

 <app-group-admins [group]="group"></app-group-admins>

所以基本上我正在尝试通过 ngOnInit 创建用户数组，但它会引发错误 TypeError: Cannot read property 'users' of null 尽管如果我使用 getUsers() 函数一切正常。任何帮助将不胜感激。

Answer 1

为什么不在他的输入中使用setter？ - 如果您不需要分组，则不需要存储在辅助变量中

  @Input() set group(value:Group){
    this.users=value && value.users?value.users..map((a: { user: number; permissions: number; }) => 
          ({id: a.user, permissions: a.permissions}));
        :[];
  }
  users: Array<object> = [];
  constructor() { }

Answer 2

@Input() group: any = new Group();

我觉得那行不合适。如果您将某些内容从父组件传递到子组件，则使用 @Input，并且不应重新初始化。

试试这个：

@Input('group') group: Group;
ngOnInit() {
  console.log(this.group);
}