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

Question

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

这是我的控制器中的行为主体，这是在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()但我不应该这样做，如果它的输入更改值，它应该自行更新和重新渲染。除非他们在 Angular 9 中改变了这一点

Answer 1

我想我记得这是因为 selectedRole.permission 是一个数组，而 Angular 不知道该数组内的值是否正在更改。

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

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