Angular2:没有 String 的提供者！(child -> String) in [Array in parent [英] Angular2 : No provider for String! (child -> String) in [Array in parent

问题描述

当我单击添加按钮以使用输入将数据从父级发送到子级时，我正在 angular2 中构建基本的 Todo 应用程序我得到 No provider for string！(child->string)，并且没有显示数据，只显示子类的按钮，是什么意思

这里是父组件:

@Component({选择器:'父组件'，指令:[子]，模板:`<h1 class="text-center">待办事项应用</h1><div class = "form-group"><标签>任务</标签><input type = "text" class = "form-control" #task><标签>细节</标签><input type = "text" class = "form-control" #detail ><button type = "submit" class = "btn btn-default"(click) = "addtask(task, detail)">添加任务</button><child-component *ngFor = "#todo of Array" [taskobject] = "todo">正在加载... </child-component>

`})班级家长{//taskobj : {task : string, details : string, id: number};数组:子[]；身份证号码;构造函数(){//我希望它初始化为父创建this.Array = [];}添加任务(任务:HTMLInputElement，详细信息: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));控制台日志(数组)任务值 = '';细节值 = '';}

这是子组件:

@Component({选择器:'子组件'，输入:['taskobject']，//输出:['objectsend']，模板:`{{taskobject.task}}{{taskobject.details}}<button type = "button" class = "btn btn-default"(click) = "deletetask()">Delete</button><button type = "button" class = "btn btn-defualt"(click) = "updatetask()">更新</button>`})班级孩子{//我们正在创建一个与子组件一样配置的实例任务:字符串；细节:字符串；身份证号码;//数组:任何[];构造函数(任务:字符串，详细信息:字符串，id:数字){this.task = 任务；this.detals = 详细信息；this.id = id;}}

解决方案

由于 Angular2 自己实例化 child 类并尝试将您在其构造函数中定义的参数注入其中，因此出现错误等级.他们没有关联的提供者...

否则如果你想从父组件引用子组件，你可以利用 @ViewChild 装饰器通过注入从父组件引用子组件:

import { Component, ViewChild } from 'angular2/core';(……)@成分({选择器:'我的应用'，模板:`<h1>我的第一个 Angular 2 应用程序</h1><孩子></孩子><button(点击)="submit()">提交</button>`，指令:[应用程序]})导出类 AppComponent {@ViewChild(SearchBar) searchBar:SearchBar;(……)一些其他方法(){this.searchBar.someMethod();}}

这是更新的 plunkr:http://plnkr.co/edit/mrVK2j3hJQ04n8vlXLXt?p=预览.

您可以注意到也可以使用 @Query 参数装饰器:

导出类 AppComponent {构造函数(@Query(SearchBar)子项:QueryList){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:没有 String 的提供者！(child -> String) in [Array in parent的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！