javascript - Angular2从ngFor绑定(bind)ngModel

因此，我正在使用textarea动态渲染ngFor，但是我不确定如何传递ngModel将其绑定(bind)到我的函数中。

<div *ngFor="let inputSearch of searchBoxCount; let i = index" [ngClass]="{'col-sm-3': swaggerParamLength=='3', 'col-sm-9': swaggerParamLength=='1'}">
   <textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search Product {{inputSearch.name}}"
     [(ngModel)]="inputSearch.name"></textarea>
  </div>

textarea示例:


textarea是根据我从api调用获得的响应的长度进行渲染的，在我的情况下searchBoxCount基本上是searchBoxCount.length，因此如果length = 1，则仅会渲染1 textarea(如果其3则将显示3 textareas)。 obj的名称不同(例如:id / email / whatever)，因此ngModel基于json对象中的obj名称。

如何将inputSearch.name绑定(bind)到函数getQueryString()

 getQueryString() {
    this.isLoading = true;
    let idInputValue = inputSearch.name; //bind it here

    return "?id=" + idInputValue
        .split("\n") // Search values are separated by newline and put it in array collection.
        .filter(function(str) {
            return str !== ""
        })
        .join("&id=");
}

调用getQueryString()的搜索功能

searchProduct() {
    let queryString1 = this.getQueryString();
    this._searchService.getProduct(queryString1)
        .subscribe(data => {
            console.log(data);
        });
}

我知道如果ngModel不是来自ngFor时该怎么做，是否有另一种方法可以从textarea中获取没有ngModel的值？也许那是唯一的方法，或者如果我仍然可以使用ngModel。

最佳答案

当前状态的摘要

首先，让我总结一下您的数据在哪里。您有一个或多个名为searchBoxCount的对象的列表。列表中的每个元素都是一个具有name属性的对象，因此，例如，您可以调用let name = this.searchBoxCount[0].name;来获取列表中第一个对象的名称。

在HTML模板中，您可以使用ngFor遍历searchBoxCount列表中的所有对象，并在每次迭代中将对象分配给名为inputSearch的局部变量(给ngFor)。然后，将每个循环迭代中创建的文本区域的输入绑定(bind)到该迭代的name对象的inputSearch属性。

如何获取数据

这里的关键是inputSearch是与searchBoxCount中存储的对象相同的某个特定索引(第一个对象的索引为0，等等)。因此，当ngModel绑定(bind)到inputSearch.name时，它也绑定(bind)到searchBoxCount[n].name。在ngFor外部，您将遍历searchBoxCount列表以获取所需的每个名称。

结果是

根据原始帖子的评论，听起来您可以拥有一个或
您需要在查询字符串输出中包括更多名称。这意味着您的getQueryString()起作用，您必须遍历列表(或在这种情况下，让列表为我们循环):

getQueryString() {
    this.isLoading = true;
    let result : string = "?id=";
    this.searchBoxCount.forEach(
        (inputSearch:any) => {  //Not the same variable, but same objects as in the ngFor
            result = result + inputSearch.name + "&id=";
    });
    result = result.slice(0, result.length - 4);  //trim off the last &id=
    return result;
}

编辑:具有不同名称的多个不同字段

从这篇文章的评论中可以很清楚地看到，每个inputSearch都有自己的键供查询字符串使用，该键存储在name属性中。您需要保留该名称，这意味着无法将ngModel绑定(bind)到该名称。否则，用户将通过输入自己的文本来破坏名称，并且将无法找回正确的密钥。为此，您需要将ngModel绑定(bind)存储到inputSearch对象的其他属性。我将假定该对象具有value属性，因此它看起来像这样:

{
    name: "id",
    value: "33\n44"
}

也就是说，每个inputSearch都有一个名称，并且该值将具有一个或多个值，并用新行分隔。然后，您必须将HTML模板更改为此:

<div *ngFor="let inputSearch of searchBoxCount; let i = index"
     [ngClass]="{'col-sm-3': swaggerParamLength=='3', 'col-sm-9':
     swaggerParamLength=='1'}">
   <textarea name="{{inputSearch.name}}"
             id="{{inputSearch.name}}" rows="3" class="search-area-txt"
             attr.placeholder="Search Product {{inputSearch.name}}"
             [(ngModel)]="inputSearch.value"></textarea>
</div>

请注意，我已将ngModel从inputSearch.name更改为inputSearch?.value(如果没有开头的值，则？允许为null)inputSearch.value。然后，getQueryString()方法如下所示:

getQueryString() {
    let result:string = "?";

    //for each of the input search terms...
    this.searchBoxCount.forEach( (inputSearch:any) => {
        // first reparse the input values to individual key value pairs
        let inputValues:string = inputSearch.value.split("\n")
             .filter(function(str) { return str !== "" })
             .join("&" + inputSearch.name + "=");
        // then add it to the overall query string for all searches
        result = result +
             inputSearch.name +
             "=" +
             inputValues +
             "&"
    });
    // remove trailing '&'
    result = result.slice(0, result.length - 1);
    return result;
}

注意，使用RxJs可能更容易，但是我正在测试 Vanilla javascript。

使用此方法，如果用户输入了两个ID(33和44)，一个sku和两封电子邮件，则结果为?id=33&id=24&sku=abc123&[email protected]&[email protected]