输入更改值时，角度组件不更新 [英] Angular component not updating when input changes value

问题描述

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

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

ngOnInit() {this.selectedRole$.next({ name: '当前权限', 权限: this.getUserPermissions()}showRoleDetails(角色:任何):无效{this.selectedRole$.next(role);}

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

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

这里是 c-permissions-display 组件:

import { Component, OnInit, Input } from '@angular/core';从'src/app/canopy-common/services/utility.service'导入{UtilityService}；@成分({选择器:'c-权限-显示'，templateUrl: './permissions-display.component.html',styleUrls: ['./permissions-display.component.scss']})导出类 PermissionsDisplayComponent 实现 OnInit {@Input() 权限:任何[];格式化权限:任何[];构造函数(私有工具:UtilityService) { }ngOnInit() {this.formattedPermissions = this.formatPermissionsArray();}私有格式权限数组():任何{退货}}

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

解决方案

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

试试这个

parent.component.html

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

child.component.ts

导出类 PermissionsDisplayComponent 实现 OnInit {@Input() 权限 = 新的 BehaviorSubject(null);格式化权限:任何[];构造函数(私有工具:UtilityService) { }ngOnInit() {this.permission.subscribe(permission=>{this.formattedPermissions = this.formatPermissionsArray();})}私有格式权限数组():任何{退货}}

So I have a component that takes in a value from an object. I have the outer div subscribed to a behavior subject. When I update the behavior subjects value using next() the title of the container div updates but the inner component refuses to re-render. Am I doing something wrong here?

Here is the behavior subject in my controller, this is called in the ngOnInit method and the update method that is called on button click in the html:

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

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

here is the parent component html this is where I am using async to subscribe to the behavior subject. the selectedRole.name updates perfectly but the inner c-permissions-display does not re-render:

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

here is the c-permissions-display component:

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

if I place a console log in the ngOnInit it calls once when the page loads but never again after calling next() on the behavior subject. I know I can get this to work if I implement OnChanges and then the ngOnChanges() method but I should not have to do that it should update and re-render on its own if its input changes value. Unless they changed that in angular 9

解决方案

Instead of passing value to child component. you can pass observable to child component and subscribe inside child component so that whenver value changes in parent component child component get notified.

Try this

parent.component.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>

child.component.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
  }
}

这篇关于输入更改值时，角度组件不更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！