使用输入值填充数组

Question

我尝试将字符串从输入推送到数组中，因此我可以将该数组分配给<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[] = []
    ){}
}

Answer 1

您尝试进入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);
  }
}

Answer 2

问题是，您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> 这样的内容。

将代码修改为以下内容，此处我决定更改变量的名称，但如上所述，您还可以更改模板引用变量的名称。

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

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

和TS：

list_of_like_buttons = ui.WebDriverWait(browser, 10).until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR,".button.blue")))

# Click on the second "Like"-button.
list_of_like_buttons[1].click()

<强> StackBlitz