如何在 Angular 6 中检索 ng-input 的值答案

【问题标题】：How to retrieve the value of ng-input in Angular 6如何在 Angular 6 中检索 ng-input 的值
【发布时间】：2018-08-29 08:53:57
【问题描述】：

我使用Angular 6 和模块ngx-chips 来使用ng-input 字段，所以这是HTML 模板：

      <div class="form-group container">
        <div class="row">
          <div class=" col-sm-12">
            <label for="FormControlAlias"
              class="col-sm-2 col-form-label float-left">Alias</label>
            <div class="col-sm-8 float-left" >
              <tag-input #alias [(ngModel)]="aliasList"
                [secondaryPlaceholder]="'Enter the project aliases'"
                [placeholder]="'Enter an alias'"
                [modelAsStrings]="true"
                name="alias" [separatorKeyCodes]="[188]" > </tag-input>
            </div>
          </div>
        </div>
      </div>
<button type="button" class="btn btn-primary"
            (click)="addAlias(alias.value);>Add</button>

这是我通过单击按钮调用的函数：

addAlias( alias: Array<string>): void {

    console.log(alias.value);

}

在控制台中我收到此错误：

ERROR TypeError: "alias is undefined"

我想获取 #alias 的值并向数据库发出一个 post 请求，但我无法检索到该值。

【问题讨论】：

（点击）中的alias.value是什么意思？
ng-input 的内容。用户在 ng-input 字段中插入一些值，并将它们传递给函数 addAlias()
您已经在aliasList 中拥有这些值。就用那个吧。

标签： html angular ngx-chips

【解决方案1】：

你必须在你的类中定义 aliasList 作为一个变量。

在您可以使用以下命令检索值之后：

addAlias(): void{
    console.log(this.aliasList);
}

【讨论】：

【解决方案2】：

您不需要从模板发送alias 值。您已经通过ngModel 在aliasList 中设置了这些值。就用那个吧。

addAlias() {
    console.log(this.aliasList);
}

模板

<button type="button" class="btn btn-primary"
            (click)="addAlias()">Add</button>

【讨论】：