Angular2從ngFor綁定ngModel

Question

所以我使用ngFor動態渲染我的textarea然而我不知道如何通過ngModel將它綁定到我的函數中。

<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 。 objs有不同的名稱（例如：id / email / whatever），因此ngModel基於json對象的obj名稱。

如何將inputSearch.name綁定到我的函數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=");
}

搜索func調用getQueryString（）的位置

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

如果ngModel不是來自ngFor ，我知道如何做到這ngFor ，還有另一種方法可以從沒有ngModel的textarea獲取值嗎？ 也許這是唯一的方法，或者我仍然可以使用ngModel 。

Answer 1

當前狀態摘要

首先，讓我總結一下您的數據所在。 您有一個名為searchBoxCount的一個或多個對象的列表。 列表中的每個元素都是一個具有name屬性的對象，因此您可以調用let name = this.searchBoxCount[0].name; 獲取列表中第一個對象的名稱。

在HTML模板中，您使用ngFor循環遍歷searchBoxCount列表中的所有對象，並在每次迭代中將對象分配給名為inputSearch的本地（到ngFor）變量。 然后，將每個循環迭代中創建的textarea的輸入綁定到該迭代的inputSearch對象的name屬性。

如何獲取您的數據

這里的關鍵是inputSearch與在某個特定索引（第一個對象的索引0等）中存儲在searchBoxCount中的對象相同。 所以當ngModel綁定到inputSearch.name它也與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綁定到該名稱。 否則，用戶將通過鍵入自己的文本來銷毀名稱，並且無法獲得正確的密鑰。 為此，您需要將ngModel綁定到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=name@compa.ny&email=an.other@compa.ny