angular - 在 ngFor 内部时，Angular 双向数据绑定不起作用（模型不更新）

Question

我有一个 firestore 应用程序，我试图制作一个权限模块，我的 json 数据看起来像这样

adminGroup: false
clientId: "UuAgaMmfbMbyUXja4hkkdwlwcrP2"
groupName: "Salesman"
id: "b268df7f-c35b-444a-aaa1-4270e9e10eb0"
permissions:
configuration: {canDelete: true, canRead: false, canUpdate: false, canView: false, canWrite: true}
customers: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
employees: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
expenses: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
invoice: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
products: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
providers: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
purchaseOrder: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}
repairs: {canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false}

基本上在权限内我有一个具有属性的对象

为了展示它，我编写了以下模板：

<div *ngFor="let permission of (selectedGroup?.permissions | keyvalue)">
    <p-panel header="{{ permission.key }}">
      <div class="ui-g">
        <div class="ui-g-2" *ngFor="let privilege of (permission.value | keyvalue)">
          <p-checkbox label="{{ privilege.key }}" [(ngModel)]="privilege.value" binary="true"></p-checkbox>
        </div>
      </div>
    </p-panel>
  </div>

表格很好地呈现，并且来自firestore的实际数据正在呈现，如图所示

所以一个 wway 绑定正在工作，但是当我检查复选框时，我注意到模型没有被更新......

更新分享我的组件代码

export class UserGroupComponent implements OnInit, OnDestroy {

  form: FormGroup;

  groups: Group[];

  groupsSubscription: Subscription;

  display = false;

  user: User;

  permissions: Permission;
  selectedGroup: Group;

  constructor(private groupService: GroupService, private core: CoreComponent,
    private formBuilder: FormBuilder, private authService: AuthService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      groupName: [null, [Validators.required]],
      adminGroup: [false, [Validators.required]],
      clientId: [null, []],
      id: [null, []]
    });
    this.authService.user$.subscribe(user => (this.user = user));
    this.getGroups();
  }


  ngOnDestroy() {
    this.groupsSubscription.unsubscribe();
  }

  getGroups() {
    this.groupsSubscription = this.groupService.groups$.subscribe(groups => {
      this.groups = groups;
    });
  }

  addGroup() {
    this.display = true;
  }

  clearForm() {
    this.form.reset();
    this.form.patchValue({
      adminGroup: false
    });
  }

  add() {
    this.form.value.clientId = this.user.clientId;
    const group = this.form.value as Group;
    group.id = Guid.create().toString();
    group.permissions = {} as Permission;
    group.permissions.configuration = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.customers = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.employees = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.expenses = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.invoice = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.products = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.providers = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.purchaseOrder = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    group.permissions.repairs = { canDelete: false, canRead: false, canUpdate: false, canView: false, canWrite: false };
    this.groupService.create(this.form.value).subscribe(
      success => {
        this.core.showMessage({
          severity: 'success',
          summary: this.core.tWithParams('employee', 'success-msg-group', { name: this.user.fullName }),
        });
        this.display = false;
      },
      error => {
        this.core.showMessage({
          severity: 'error',
          summary: this.core.t('expenses', 'error-msg'),
          detail: error.message,
        });
      }
    );
  }

  update() {
    console.log(this.permissions);
  }

  showGroupPrivilege(group: Group) {
    console.log(group);
    this.selectedGroup = group;
    this.permissions = group.permissions;
  }

}

标签： angularprimeng