Angular2：没有供应商串！ （子 - ＆GT;字符串）在父[阵列 [英] Angular2 : No provider for String! (child -> String) in [Array in parent

问题描述

林建设基本的Todo应用程序在angular2当我点击添加按钮，使用输入我没有得到任何提供商字符串从父数据发送到孩子！ （儿童期>字符串），并没有在子类中只显示按钮的数据显示，这是什么意思

下面是父组件：

  @Component（{
选择：父组件，
指令：[小孩]
模板：`
＆LT; H1类=TEXT-中心＆GT;待办事项应用与LT; / H1＆GT;
＆LT; D​​IV CLASS =表单组＆GT;
＆LT;＆拉布勒GT;任务＆LT; /拉布勒＆GT;
＆LT;输入类型=文本级=表格控＃任务＆GT;
＆LT;＆拉布勒GT;详情＆LT; /拉布勒＆GT;
＆LT;输入类型=文本级=表格控#detail＆GT;
＆LT;按钮式=提交级=BTN BTN-默认
（点击）=addtask（任务细节）＆gt;添加任务＆LT; /按钮＆GT;
＆LT;儿童组件* ngFor = [taskobject] =待办事项＆GT阵列#todo
载入中...＆LT; /儿童成分＆gt;
＆LT; / DIV＆GT;`
}）
父类{
// taskobj：{任务：字符串，详细信息：字符串，ID：数};
阵列：孩子[];
身份证号;构造函数（）{    //我想这初始化ASA父创建
    this.Array = [];
}addtask（任务：HTMLInputElement，细节：HTMLInputElement）{
    // this.taskobj.task = task.value;
    // this.taskobj.details = detail.value;
   this.id = Date.now（）;
    // this.array.push（）;    this.Array.push（新儿（task.value，detail.value，this.id））;
    的console.log（阵列）
    task.value ='';
    detail.value ='';}
 

这是子组件：

  @Component（{选择：儿童分量'，
输入：['taskobject']，
//输出：['objectsend']，
模板：`
  {{taskobject.task}}
  {{taskobject.details}}
  ＆LT;按钮式=按钮级=BTN BTN-默认
  （点击）=DeleteTask活动（）＆GT;删除＆LT; /按钮＆GT;
  ＆LT;按钮式=按钮级=BTN BTN-defualt
  （点击）=updatetask（）＆GT;更新和LT; /按钮＆GT;  `
  }）
类子{//我们创建了一个实例，就像配置为子组件
任务：字符串;
detals：字符串;
身份证号;
//数组：任何[];构造函数（任务：字符串，细节：字符串，ID：号码）{
    this.task =任务;
    this.detals =细节;
    this.id = ID;
}}
 

解决方案

由于Angular2实例化孩子类由自己，并尝试在它注入你有一个错误参数定义在其构造的水平。有没有相关的供应商为他们...

否则，如果你想从父母的人引用子组件，您可以利用 @ViewChild 装饰通过注射从父一个中引用的子组件：

 进口{组件，ViewChild}从'angular2 /核心;（......）@零件（{
  选择：我的应用，
  模板：`
    ＆LT; H1＆gt;我的第一角2应用＆LT; / H1＆GT;
    ＆LT;儿童＆GT;＆LT; /儿童＆GT;
    ＆LT;按钮（点击）=提交（）＆GT;提交＆LT; /按钮＆GT;
  `
  指令：[应用]
}）
出口类AppComponent {
  @ViewChild（搜索栏）搜索栏：搜索栏;  （......）  someOtherMethod（）{
    this.searchBar.someMethod（）;
  }
}
 

下面是更新plunkr： http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt p = preVIEW 。

您可以看到， @Query 参数装饰也可以使用：

 出口类AppComponent {
  构造函数（@Query（搜索栏）儿童：QueryList＆LT;搜索栏＆GT;）{
    this.childcmp = children.first（）;
  }  （......）
}
 

希望它可以帮助你，
蒂埃里

Im building basic Todo App in angular2 when I click add button to send data from parent to child using input I get No provider for string! (child->string), and no data displayed only button at the child class is shown, what does it mean

here is parent component:

@Component({
selector : 'parent-component',
directives : [child],
template : `
<h1 class= "text-center">ToDo App</h1>
<div class = "form-group">
<lable>Task</lable>
<input type = "text" class = "form-control" #task>
<lable>Detail</lable>
<input type = "text" class = "form-control" #detail >
<button type = "submit" class  = "btn btn-default" 
(click) = "addtask(task,    detail)">Add Task</button>


<child-component *ngFor = "#todo of Array" [taskobject] = "todo">
Loading... </child-component>
</div>

`
})
class parent{
//taskobj : {task : string, details : string, id:  number};
Array : child[];
id : number;

constructor(){

    //i want this to initialize asa parent create
    this.Array = [];
}

addtask(task : HTMLInputElement, detail : HTMLInputElement){
    // this.taskobj.task= task.value;
    // this.taskobj.details = detail.value;
   this.id = Date.now();
    // this.array.push();

    this.Array.push(new child(task.value, detail.value, this.id ));
    console.log(Array)
    task.value = '';
    detail.value = '';

}

And this is child component:

@Component({

selector : 'child-component',
inputs : ['taskobject'],
//outputs : ['objectsend'],
template : `
  {{taskobject.task}}
  {{taskobject.details}}
  <button type = "button" class = "btn btn-default" 
  (click) = "deletetask()">Delete</button>
  <button type = "button" class = "btn btn-defualt" 
  (click) = "updatetask()">Update</button>

  `
  })
class child{

//we are creating a instance just as configured as child component 
task : string;
detals : string;
id : number;
//array : any[];

constructor(task : string, detail : string, id : number){
    this.task = task;
    this.detals = detail;
    this.id = id;
}

}

解决方案

You got an error since Angular2 instantiate the child class by its own and try to inject in it the parameters you define at its constructor level. There is no associated provider for them...

Otherwise if you want to reference children components from parent ones, you could leverage the @ViewChild decorator to reference the child component from the parent one by injection:

import { Component, ViewChild } from 'angular2/core';  

(...)

@Component({
  selector: 'my-app',
  template: `
    <h1>My First Angular 2 App</h1>
    <child></child>
    <button (click)="submit()">Submit</button>
  `,
  directives:[App]
})
export class AppComponent { 
  @ViewChild(SearchBar) searchBar:SearchBar;

  (...)

  someOtherMethod() {
    this.searchBar.someMethod();
  }
}

Here is the updated plunkr: http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=preview.

You can notice that the @Query parameter decorator could also be used:

export class AppComponent { 
  constructor(@Query(SearchBar) children:QueryList<SearchBar>) {
    this.childcmp = children.first();
  }

  (...)
}

Hope it helps you, Thierry

这篇关于Angular2：没有供应商串！ （子 - ＆GT;字符串）在父[阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！