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

How do you submit a new object to an array via multiple inputs angular2

本文关键字：一个 新对象 对象 提交 何通过 输入 数组      更新时间：2023-09-26

希望在一个更复杂的例子上得到一些帮助，以扩展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.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的例子

感谢任何帮助。谢谢!

尝试在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>

你的点击监听器正在调用它认为是对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中，那么这应该是你的app组件

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 { }
相关文章：