角度2:未在父级上定义ViewChild [英] Angular 2 : ViewChild is undefined on parent
问题描述
我有以下错误:
错误:未捕获(承诺):TypeError:无法设置未定义的属性"test_id"TypeError:无法设置未定义的属性"test_id"
Error: Uncaught (in promise): TypeError: Cannot set property 'test_id' of undefined TypeError: Cannot set property 'test_id' of undefined
错误在此行触发:
console.log('after view init testList', this.productList.test_id);
我看到了很多帖子,但是它们似乎都已过时,并且大多数都在说我必须使用函数ngAfterViewInit.我有一个触发updateUpdateId的动作,我想将此ID传递给我的子视图ProductListComponent.这是我的父组件:
I saw a lot of posts but all of them seems outdated and most of them are saying that I have to use a function ngAfterViewInit which I did. I have a clic action that triggers updateTestId and I want to pass this id to my child view ProductListComponent. Here is my parent component :
import { Component,ViewChild} from '@angular/core';
import {Test,TestData} from './testService';
import { LocalDataSource } from 'ng2-smart-table';
import {ProductListComponent} from '../../components/product/list/productList.component';
@Component({
selector: 'test-list',
templateUrl: './testList.html',
styleUrls: ['./testList.scss']
})
export class TestListComponent{
//tests: Test[];
tests: any[];
selected_test : number;
@ViewChild(ProductListComponent)
private productList: ProductListComponent;
constructor(protected service: TestData){
this.service.getData().then((data) => {
this.tests = data.tests;
this.source.load(data);
});
}
settings = {
editable : false,
actions: {
add:false,
edit:false,
delete:false
},
columns: {
id: {
title: 'ID',
type: 'number'
},
nb_cartons: {
title: 'Cartons',
type: 'number'
},
nb_items: {
title: 'Items',
type: 'number'
},
nb_pallets: {
title: 'Pallets',
type: 'number'
},
};
//source : Test[];
source: LocalDataSource = new LocalDataSource();
public updateTestId(value:any):void {
this.selected_test = value.data.id;
console.log('rowSelect', this.selected_test );
//console.log(this.productList.test_id)
}
}
这是我的子组件:
import { Component,Input,Output, OnChanges, SimpleChanges } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';
import {Test} from '../../test/testService';
@Component({
selector: 'product-list',
templateUrl: './productList.html',
styleUrls: ['./productList.scss']
})
export class ProductListComponent implements OnChanges{
@Input() test_id : number = null;
settings = {
editable : false,
actions: {
add:false,
edit:false,
delete:false
},
columns: {
id: {
title: 'ID',
type: 'number'
},
sku: {
title: 'SKU',
type: 'string'
},
reference: {
title: 'Reference',
type: 'string'
},
size: {
title: 'Size',
type: 'string'
},
},
edit: {
editButtonContent: '<i class="ion-edit"></i>',
saveButtonContent: '<i class="ion-checkmark"></i>',
cancelButtonContent: '<i class="ion-close"></i>',
}
};
source: LocalDataSource = new LocalDataSource();
constructor() {
}
ngOnChanges(changes: SimpleChanges) {
console.log(changes['test_id'],changes['test_id'].currentValue);
console.log('change in child',changes.test_id);
}
/*
@Input()
set _test_id(id: number) {
this._test_id = id;
}
get test_id(): number { return this._test_id; }
*/
}
我像这样使用子选择器:
i use the child selector like this :
<test-list></test-list>
<product-list #productList [test_id]="selected_test"></product-list>
推荐答案
如果要将数据从父级传递到子级,则可以直接传递
If you want to pass data from parent to child you can directly pass
<product-list [test_id]="selected_test"></product-list>
就是这样,仅此而已.
无需通过 @ViewChild
要检测产品列表组件随时间变化的值
To detect the changed value over the time from product-list component
ngOnChanges(changes: SimpleChanges) {
console.log(changes['test_id'].currentValue);
}
示例:
@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnChanges {
@Input()
prop: number;
ngOnChanges(changes: SimpleChanges) {
// changes.prop contains the old and the new value...
}
}
注意事项:您需要在子组件上实现OnChanges
.
有关更多详细信息,请阅读此文档
For more detail please read this doc
这篇关于角度2:未在父级上定义ViewChild的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!