使用输入值填充数组答案

【问题标题】：Populate array with input values使用输入值填充数组
【发布时间】：2018-05-22 19:05:36
【问题描述】：

我尝试将输入中的字符串推送到数组中，这样在我可以将该数组分配给<select> 之后，每个<option> 应该是输入中的一个字符串。这是我到目前为止所做的，这是我得到的错误，我不知道该怎么做，因为我找不到一些关于 Angular 数组的可靠信息，只有硬编码示例我想为我提供一个示例，我该怎么做这样做。

这是我的 HTML 代码，其中我只有一个输入来添加玩家的名字

    <div class="addplayer">
      <form (submit)="onSubmit()" #formName="ngForm">
        <h2>Add a new player</h2>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="e.g.Jimbo"
      [(ngModel)]="name" name="name" id="name" #name="ngModel" required>
      {{model.name}}
    </div>
    <button type="submit" class="btn btn-success" [disabled]="!formName.form.valid">Add Player</button>
  </form>

这是我的 ts 文件，其中包含函数 onSubmit()，我尝试将输入中的名称推送到数组中

import { Component, OnInit } from '@angular/core';
import { AddPlayer } from './add-player';

@Component({
  selector: 'app-add-player',
  templateUrl: './add-player.component.html',
  styleUrls: ['./add-player.component.css']
})
export class AddPlayerComponent{

  name:string = "";
  onSubmit() {
    this.listOfNames.push(this.name)
    console.log(this.listOfNames);
  }
}

这是另一个带有构造函数的 ts 文件

export class AddPlayer {
  constructor(
    public listOfNames: string[] = []
    ){}
}

【问题讨论】：

AddPlayerComponent 没有listOfNames 属性，因此不清楚您认为this.listOfNames 在该类中会做什么。
AddPlayer 类并没有真正在您的代码中的任何地方使用，并且使问题令人困惑。您可以尝试将this.name 添加到局部变量中。正如@jonrsharpe 提到的那样，只需事先声明变量即可。

标签： arrays angular input

【解决方案1】：

问题是，您将name 用于ngModel 和模板引用。你也需要改变。同样如前所述，您需要声明数组listOfNames。此外，您的 model 是一个字符串，因此您没有尝试在模板中显示 model.name 这样的东西。

将代码修改为如下，这里我决定改变量名，不过如前所述，你也可以改模板引用变量的名字。

<form (ngSubmit)="onSubmit()" #formName="ngForm">
  <h2>Add a new player</h2>
  <input [(ngModel)]="nameModel" name="name" id="name" #name="ngModel" required>
  <button type="submit" [disabled]="!formName.form.valid">Add Player</button>
</form>

和 TS：

nameModel:string = "";
listOfNames = [];

onSubmit() {
  this.listOfNames.push(this.nameModel)
  console.log(this.listOfNames);
  this.nameModel = '';
}

StackBlitz

【讨论】：

【解决方案2】：

您尝试推入this.listOfNames，它应该像这样在您的AddPlayerComponent 中声明

import { Component, OnInit } from '@angular/core';
import { AddPlayer } from './add-player';

@Component({
  selector: 'app-add-player',
  templateUrl: './add-player.component.html',
  styleUrls: ['./add-player.component.css']
})
export class AddPlayerComponent{
  listOfNames = [];
  name:string = "";
  onSubmit() {
    this.listOfNames.push(this.name)
    console.log(this.listOfNames);
  }
}

【讨论】：