輸入更改值時，角度組件不更新

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
  }
}