大佬教程收集整理的这篇文章主要介绍了订阅后如何在Angular中重新渲染组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我在父组件中有以下代码
在 parent.component.ts 中
constructor(private cdr: ChangeDetectorRef,private elementRef:ElementRef,private APIService: APIService) {
}
ngOnInit() {
// Some Code
this.APIService.getFilters(this.metric).subscribe((results: FilterItem[][]) => {
this.cdr.detectChanges();
this.regionList = results[0];
this.subregionList=results[1];
})
// Some Code
}
在 parent.component.HTML 中
<app-filter-unit [checkBoxListActual]="regionList" [selectedCheckBoxList]="selectedRegionList" (ListUpdated)="updateRegions($event)">
</app-filter-unit>
在子组件中 filter-unit.component.ts
checkBoxList: any[] = [];
@input() selectedCheckBoxList = ['ALL'];
@Output() ListUpdated = new EventEmitter();
@input() checkBoxListActual: any[] = [];
searchword: any="";
constructor(private cdr: ChangeDetectorRef) { }
ngOnInit() {
this.checkBoxListActual = [...new Set(this.checkBoxListActual)];
if(this.selectedCheckBoxList && this.selectedCheckBoxList.length > 0) {
if(this.selectedCheckBoxList[0] == 'ALL') {
this.selectedCheckBoxList.pop();
}
}
if(this.selectedCheckBoxList.length == 0 ) {
this.selectedCheckBoxList = [...this.checkBoxListActual];
}
this.checkBoxList = [...this.checkBoxListActual];
this.checkBoxList = [...new Set(this.checkBoxList)];
this.selectedCheckBoxList = [...new Set(this.selectedCheckBoxList)];
}
在 filter-unit.component.HTML 中
<div style="overflow: auto;height: 140px;">
<div *ngFor="let content of checkBoxList; let i=index" >
<span>
<input type="checkBox" name="unit-checkBox"
[checked]="selectedCheckBoxList.indexOf(content) >= 0" value="content"
(change)="onClickCheckBox1(content,$event)">
</span>
<span> {{content}}</span>
</div>
</div>
当程序运行时，app-filter-unit 会将“regionList”设置为空，因为这是初始值。 但是我有异步 API 调用 getFilters 它将设置 regionList。 我希望 Angular 重新绘制 app-filter-unit，因为现在“regionList”会有一些价值。
如何做到这一点？
如果您使用默认更改检测，您的 @Input() selectedCheckboxList 应该会自动更新。但模板实际上绑定到 checkBoxList，您只能在 ngOnInit() 中对其进行初始化。FilterUnitComponent 初始化后发生的更改永远不会出现在 checkBoxList 中，因此不会呈现。
如果您想对输入的更改做出反应，可以通过实现 ngOnChanges() 来实现 OnChanges。根据{{3}}：
在 ngOnInit() 之前以及每当一个或多个数据绑定输入属性更改时调用。
或者，您还可以为要对其做出反应的输入定义设置器。每次输入更改时都会调用 setter。
private _selectedCheckBoxList: any[];
get selectedCheckBoxList(): any[] {
return this._selectedCheckBoxList;
}
@Input() set selectedCheckBoxList(value: any[]) {
this._selectedCheckBoxList = value;
// TODO: update this.checkBoxList
}
以上是大佬教程为你收集整理的订阅后如何在Angular中重新渲染组件全部内容，希望文章能够帮你解决订阅后如何在Angular中重新渲染组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。