javascript - 如何通过多个输入将新对象提交到数组

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.power">

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

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