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

希望在一个更复杂的例子上得到一些帮助，这个例子扩展了angular的例子

与每次提交一个字符串不同，您如何提交多个值，如以下示例所示，例如：

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

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

addHero(newHero) {
        if (newHero) {

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

          this.heroes.push(entry);
        }
    }

但是模板中需要什么呢？您还会使用

keyup吗？在这种情况下输入
：

模板：

<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>

name您的单击侦听器正在调用它认为是对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>

在你的班级宣言广告里

input1: String;

然后使用这个变量

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

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

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

既然你打电话来了

<little-tour></little-tour>

尝试在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.power">

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

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

名称
权力
添加

姓名：{{hero.name}
力量：{{hero.power}

非常感谢。我曾认为，像在原始示例中一样，addHero函数需要一个将输入值传递给数组的参数。我根据你的反馈创建了新的。添加了hero的类声明，每个变量现在都在输入的双向绑定中引用，但不幸的是，解决方案似乎仍然无法工作。您能详细说明现在的问题吗？上面的解决方案应该可以用，因为我已经试过了，效果很好。我发现了我遇到的问题。我只需要将要声明的英雄类移动到LittleTourComponent之后。我相信这是因为装饰师对紧随其后的突出显示的对象进行处理。所以我现在接受了你的回答（补充说明：我认为应该考虑类装饰相对于装饰器的顺序。再次感谢您的帮助Hammerschlag。感谢mark。我使用修订的click listener更新了，并根据Hammerschlag的反馈添加了newHero构造函数，因此我认为newHero现在应该存在于组件中nts作用域。现在使用name/power而不是.value。回调周围的引号是否意味着它不再引用DOM元素？谢谢。关于回调。在angular2中，如果您在内联引用引号之外的内容，它会假定您已将该名称绑定到DOM元素。例如。通过添加引号u现在表示ur处理程序中的javascript。您可以使用实例化的组件作用域变量或函数调用。如果您想使用字符串，必须在双引号内使用单引号，但要清楚这是一个常见的混淆，在任何情况下都不应使用此代码（单击）=任何没有引号的东西噢，我看到了一个更大的问题。你正在呼叫，但你的应用程序组件在你导入它之前不知道那是什么。
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);
        }
    }
}

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

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

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