Question

我用@input装饰器创建了一个组件（让我们说A）来从选择器中获取值。这个组件将创建基于选择器中给出的@input值的文本字段。 A组件正在另一个组件中使用（比如说B） B组件具有A组件选择器和按钮。点击按钮我正在调用一个函数（让我们说GetData）在GetData函数内部，我通过为A组件创建一个对象来调用A组件中的函数（比如说getValues）。单击GetData函数时，它会调用组件中的getValues函数，该函数会抛出控制台错误，因为无法读取属性＆＃39; length＆＃39;未定义的请提前帮助我解决此问题

组件A

 import { Component, Input, OnInit, ViewChildren } from '@angular/core';
    @Component({
        selector: 'my-comp',
        templateUrl: '<form #f="ngForm">
    <div *ngFor="let iter of arr(num).fill(1);let i=index">
    <input type="text" name="textValue{{i}}" ngModel   #textValue="ngModel" [id]="'textValue' + i">
    </div>
    </form>'
    })
    export class MyCompComponent {
        @ViewChildren('textValue') inputs;
        public myData:any=[];
        @Input('iterNumber') iterNum: number;
        arr = Array;
        num: number;

        ngOnInit() {
            this.num = this.iterNum;
        }
    getValues() {
        debugger
        for(var i=0;i<this.inputs.length;i++){
          this.myData.push(this.inputs._results[i].viewModel)
        }
             console.log(this.myData)
    }
}

组件B

import { MyCompComponent } from '../my-comp/my-comp.component';
import { Component, Input,Directive } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: '<my-comp [iterNumber]=3></my-comp>
<button type="button" (click)="getValues()">GetValues</button>'
})
export class AppComponent  {
  public getValueList:any;
  constructor(public cmpnt:MyCompComponent){

  }
  getData(){
    this.cmpnt.getValues();
  }
}

控制台错误

例外：

./AppComponent类中的错误AppComponent - 内联模板：1：0 引起：无法阅读财产长度＆＃39;未定义的

原始例外：

无法读取属性＆＃39;长度＆＃39;未定义的

Answer 1

组件不是可注射的provider。它不能注入另一个组件。

只需删除此处的参数：

 constructor(public cmpnt:MyCompComponent){

  }

并使用view child。

export class AppComponent  {
  @ViewChild(MyCompComponent)
  public cmpt:any;

  public getValueList:any;

 //..
    getData(){
    this.cmpnt.getValues();
  }

Answer 2

您的html代码中存在一些错误，例如您在name中使用了多个input属性。

请看https://codepen.io/souldreamer/pen/QydMNG他们在哪里做了类似的事情（这不是我写的）。

希望这有帮助。

Angular 2，给出了无法读取属性的长度＆＃39;从另一个组件

2 个答案: