Question

希望对更复杂的示例提供一些帮助，该示例扩展了angular Tour of Heroes

中的示例

不是每次都提交一个字符串，而是如何提交多个值，如下例所示：

          export class LittleTourComponent {
               heroes = [ {
                            'name':'Hulk',
                            'power':'strength'
                        },{
                            'name':'Bulk',
                            'power':'appetite'
                        }];

我认为由提交的值组成的新“条目”应该被推送到英雄数组，如下所示：

addHero(newHero) {
        if (newHero) {

          var entry = {
            'name': newHero.name, 
            'power': newHero.power
            };

          this.heroes.push(entry);
        }
    }

但模板中需要什么？在这种情况下你还会使用keyup.enter吗？：

模板：

<label>name</label
// how should the inputs be filled out in this scenario?
<input >
<label>power</label>
<input >

<button (click)=addHero(newHero)>Add</button>

 <ul *ngFor="let hero of heroes">
  <li>name:{{hero.name}}</li>
  <li>power:{{hero.power}}</li>
</ul>

示例也在plnkr

上

任何帮助表示赞赏。谢谢！

Answer 1

尝试在ts文件中执行此操作：

import {Component} from '@angular/core';

class Hero {
    name: string;
    power: string;
}
export class LittleTourComponent {

    newHero: Hero;

    constructor() {
        this.newHero = new Hero();
    }

    heroes = [{
        'name': 'Hulk',
        'power': 'strength'
    }, {
            'name': 'Bulk',
            'power': 'appetite'
        }];

    addHero() {
        if (this.newHero) {

            var entry = {
                'name': this.newHero.name,
                'power': this.newHero.power
            };

            this.heroes.push(entry);
        }
    }
}

...这在你的HTML中

<label>name</label>
<input [(ngModel)]="newHero.name">
<label >power</label>
<input [(ngModel)]="newHero.name">

<button (click)=addHero()>Add</button>

<ul *ngFor="let hero of heroes">
    <li>name:{{hero.name}}</li>
    <li>power:{{hero.power}}</li>
</ul>

Answer 2

你的点击监听器正在调用它认为是对DOM中未定义的元素的引用，也不会使用参数。尝试在回调周围加上引号

<label>name</label
    // how should the inputs be filled out in this scenario?
    <input >
    <label>power</label>
    <input >
    <button (click)="addHero(newHero)">Add</button>

     <ul *ngFor="let hero of heroes">
      <li>name:{{hero.name}}</li>
      <li>power:{{hero.power}}</li>
    </ul>

经过进一步审核后，我注意到你在little-tour组件中引用newHero，该组件范围中不存在。此外，你已经正确绑定您的输入，但我不相信.value是返回输入的正确属性...尝试

 [(ngModel)]="input1"

在您的课程声明广告

中

input1: String;

然后使用该变量。

我直到现在才注意到你没有导入你的指令

import { Component }           from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent { }

因为你正在打电话

<little-tour></little-tour>

在您的app.component.html中，这应该是您的应用组件

import { Component }           from '@angular/core';
import {LittleTourComponent} from 'path-to-little-tour'

@Component({
  selector: 'my-app',
  templateUrl: 'app/app.component.html',
  directives: [LittleTourComponent]
})
export class AppComponent { }

如何通过多个输入angular2向数组提交新对象

2 个答案: