javascript - Angular2 从 ngFor 绑定(bind) ngModel

Question

所以我正在使用 ngFor 动态渲染我的 textarea 但是我不确定如何传递 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 是根据我从 api 调用得到的响应长度呈现的，在我的例子中 searchBoxCount 基本上是 searchBoxCount.length，所以如果它是 length 是 = 1 那么它只会呈现 1 个 textarea 如果它是 3 那么它将显示 3 个 textareas。 objs 具有不同的名称(例如: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。

Answer 1

当前状态总结

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

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

如何获取您的数据

这里的关键是 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)到它。否则，用户将通过键入自己的文本来破坏名称，并且将无法取回正确的 key 。为此，您需要将 ngModel 存储绑定(bind)到 inputSearch 对象的某些其他属性。我将假设该对象有一个 value 属性，所以它看起来像这样:

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

即每个inputSearch都有一个name，value会有一个或多个值，以换行分隔。然后，您必须将 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=name@compa.ny&email=an。 other@compa.ny