angular - Angular - 初始化后获取父组件接收数据
问题描述
我有 Angular 前端,它从 Lumen 后端获取数据:
ngAfterViewInit() {
merge()
.pipe(
startWith({}),
switchMap(() => {
this.isLoadingResults = true;
return this.exampleDatabase!.getRepoIssues(this.itemId);
}),
map(data => {
this.isLoadingResults = false;
this.isRateLimitReached = false;
return data;
}),
catchError(() => {
this.isLoadingResults = false;
this.isRateLimitReached = true;
return observableOf([]);
})
).subscribe(
data => this.applyDataChanges(data)
);
}
private applyDataChanges(data: any) {
let tree = [];
for(let b of data.buildings) {
let children = [];
for(let c of b.buildings){
children.push(new ChecklistNodeModel(c.name, false))
}
tree.push(new ChecklistNodeModel(b.group.name, false, children));
}
this.TREE_DATA = tree;
this.itemId > 0 ?
this.form = data as ControllingCompanyNewsModel :
this.form = new ControllingCompanyNewsModel(0,null,'','','', data.buildings);
}
父组件具有以下属性,然后通过 @Input 绑定到子组件:
<app-checklist-tree [treeData]="TREE_DATA"></app-checklist-tree>
和
@Input() treeData = [];
问题是出于某种原因,子组件具有空treeData
属性。虽然父组件的属性已正确更新。
任何人都可以建议我在哪里犯了错误?谢谢!
添加子组件代码
export class ChecklistTreeComponent implements AfterViewInit, OnChanges {
@Input() treeData = [];
@Output() treeDataChange = new EventEmitter<ChecklistNodeModel[]>();
levels = new Map<ChecklistNodeModel, number>();
treeControl: FlatTreeControl<ChecklistNodeModel>;
treeFlattener: MatTreeFlattener<ChecklistNodeModel, ChecklistNodeModel>;
dataSource: MatTreeFlatDataSource<ChecklistNodeModel, ChecklistNodeModel>;
constructor(private changeDetectorRef: ChangeDetectorRef) {
this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
this.isExpandable, this.getChildren);
this.treeControl = new FlatTreeControl<ChecklistNodeModel>(
this.getLevel, this.isExpandable);
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
// this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
this.dataSource.data = this.treeData;
}
getLevel = (node: ChecklistNodeModel): number => {
return this.levels.get(node) || 0;
};
isExpandable = (node: ChecklistNodeModel): boolean => {
return node.children.value.length > 0;
};
getChildren = (node: ChecklistNodeModel) => {
return node.children;
};
transformer = (node: ChecklistNodeModel, level: number) => {
this.levels.set(node, level);
return node;
}
hasChildren = (index: number, node: ChecklistNodeModel) => {
return this.isExpandable(node);
}
/** The selection for checklist */
checklistSelection = new SelectionModel<ChecklistNodeModel>(true /* multiple */);
/** Whether all the descendants of the node are selected */
descendantsAllSelected(node: ChecklistNodeModel): boolean {
const descendants = this.treeControl.getDescendants(node);
if (!descendants.length) {
return this.checklistSelection.isSelected(node);
}
const selected = this.checklistSelection.isSelected(node);
const allSelected = descendants.every(child => this.checklistSelection.isSelected(child));
if (!selected && allSelected) {
this.checklistSelection.select(node);
this.changeDetectorRef.markForCheck();
}
return allSelected;
}
/** Whether part of the descendants are selected */
descendantsPartiallySelected(node: ChecklistNodeModel): boolean {
const descendants = this.treeControl.getDescendants(node);
if (!descendants.length) {
return false;
}
const result = descendants.some(child => this.checklistSelection.isSelected(child));
return result && !this.descendantsAllSelected(node);
}
/** Toggle the selection. Select/deselect all the descendants node */
nodeSelectionToggle(node: ChecklistNodeModel): void {
node.checked = !node.checked;
this.checklistSelection.toggle(node);
const descendants = this.treeControl.getDescendants(node);
if(this.checklistSelection.isSelected(node)) {
this.checklistSelection.select(...descendants, node);
for(let descendant of descendants) {
this.nodeSelectionToggle(descendant);
}
} else {
this.checklistSelection.deselect(...descendants, node);
for(let descendant of descendants) {
this.nodeSelectionToggle(descendant);
}
}
this.changeDetectorRef.markForCheck();
}
ngAfterViewInit(): void {
this.dataSource.data = this.treeData;
}
ngOnChanges(changes: SimpleChanges): void {
this.dataSource.data = changes.treeData.currentValue;
}
}
解决方案
在父组件中实现这个
//import CheckListTreeComponent
//Import viewChild from angular core
export class ParentClass {
@ViewChild(ChecklistTreeComponent)
private tree : ChecklistTreeComponent;
constructor(){}
//
}
此时您确定父组件已收到它的价值
this.tree.update(this.TREE_DATA)
在子组件中
update(value){
this.treeData = value;
}
推荐阅读
- php - 单点登录(sso)laravel
- objective-c - YTPlayerView 未找到问题
- powershell - invoke-sqlcmd 的 Powershell 进度条
- activiti - Activiti 6:在加入两个并行任务时,带有 Async Executor 的并行网关不工作
- javascript - 为什么我的 JS 代码在调用 JS 函数 showSlides(SLIDEINDEX) 时没有显示任何其他幻灯片;即使我改变了 SLIDEINDEX 的值?
- reactjs - react redux - 将数据向下传递多个级别
- python - selenium.common.exceptions.WebDriverException:消息:未知错误:通过 InstaPy 和 selenium 测试执行时无法发现打开的页面
- python - 如何根据 HTML 通过 Selenium 和 Python 将文本发送到文本区域
- java - 如果在 Maven 插件 Tomcat 7 上运行,为什么不能在 Tomcat 8 上运行 Java Web 应用程序?
- php - 证书 x509 Laravel 身份验证 SSL