角度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屋！