输入更改值时，角度组件不更新

Question

所以我有一个从对象中获取值的组件。 我有外部 div 订阅了一个行为主题。 当我使用next()更新行为主题值时，容器 div 的标题会更新，但内部组件拒绝重新渲染。 我在这里做错了吗？

这是我的控制器中的行为主题，它在ngOnInit方法和在 html 中单击按钮时调用的更新方法中调用：

ngOnInit() {
  this.selectedRole$.next({ name: 'Current Permissions', permissions: this.getUserPermissions()
}

showRoleDetails(role: any): void {
  this.selectedRole$.next(role);
}

这是父组件 html 这是我使用异步订阅行为主题的地方。 selectedRole.name更新完美，但内部c-permissions-display不会重新呈现：

<div *ngIf="selectedRole$ | async as selectedRole" class="col-8">
  <h5 class="font-weight-medium mb-0 text-gray-500 mb-4 permissions-title">{{ selectedRole.name }}</h5>
  <div class="section-container">
    <c-permissions-display [permissions]="selectedRole.permissions"></c-permissions-display>
  </div>
</div>

这是c-permissions-display组件：

import { Component, OnInit, Input } from '@angular/core';
import { UtilityService } from 'src/app/canopy-common/services/utility.service';

@Component({
  selector: 'c-permissions-display',
  templateUrl: './permissions-display.component.html',
  styleUrls: ['./permissions-display.component.scss']
})
export class PermissionsDisplayComponent implements OnInit {

  @Input() permissions: any[];
  formattedPermissions: any[];

  constructor(
    private util: UtilityService
  ) { }

  ngOnInit() {
    this.formattedPermissions = this.formatPermissionsArray();
  }

  private formatPermissionsArray(): any {
    return stuff
  }
}

如果我将控制台日志放在ngOnInit它会在页面加载时调用一次，但在对行为主题调用next()后不再调用。 我知道如果我实现OnChanges和ngOnChanges()方法，我可以ngOnChanges()但我不应该这样做，如果它的输入更改值，它应该自行更新和重新呈现。 除非他们在角度 9 中改变了

Answer 1

我想我记得是因为 selectedRole.permission 是一个数组，而 angular 不知道这个数组中的值是否正在改变。

因此，要使阵列也刷新，您必须用新阵列覆盖权限阵列。 类似于 selectedRole.permission = [新权限数组]。

这样 angular 应该能够检测到变化并刷新视图。

Answer 2

而不是将值传递给子组件。 您可以将 observable 传递给子组件并在子组件内订阅，以便在父组件子组件中的值发生变化时得到通知。

尝试这个

父组件.html

<div *ngIf="selectedRole$ | async as selectedRole" class="col-8">
  <h5 class="font-weight-medium mb-0 text-gray-500 mb-4 permissions-title">{{ selectedRole.name }}</h5>
  <div class="section-container">
    <c-permissions-display [permissions]="selectedRole$"></c-permissions-display>
  </div>
</div>

子组件.ts

export class PermissionsDisplayComponent implements OnInit {

   @Input() permission = new BehaviorSubject(null);
   formattedPermissions: any[];

  constructor(
    private util: UtilityService
  ) { }

  ngOnInit() {
    this.permission.subscribe(permission=>{
        this.formattedPermissions = this.formatPermissionsArray();
    })

  }

  private formatPermissionsArray(): any {
    return stuff
  }
}