如何在使用 *ngFor 重復的 ng-template 中使用 ngModel

Question

我有一個使用 *ngFor 重復的ng-template 。 我正在使用ngTemplateOutletContext從 ngFor 向模板傳遞附加數據。 使用我傳遞給模板的這些數據，我正在創建一個下拉列表。 我有這個 stackblitg 示例，顯示了我所做的代碼摘錄。

數據

data = {
 row1_ID: {
  'article 1': 'Lorem Ipsum is simply dummy text ',
  'article 2': 'Lorem Ipsum has been the industry standard dummy text ',
},
 row2_ID: {
  'article 1': 'aldlsadalskjd;asjsa;kdj dalskdjaslkjd',
  'article 2': 'Lorem ipsum dolor sit ame',
 },
};

HTML

<div *ngFor="let row of data | keyvalue">
   <ng-container 
       [ngTemplateOutlet]="OpRef2"
       [ngTemplateOutletContext]="{ data: row.value, id: row.key }">
   </ng-container>
</div>

<ng-template #OpRef2 let-data="data" let-id="id">
  <div class="row">
     <h2>Row ID: {{ id }}</h2>
     <select>  <!--Using ng model here doesnt work-->
        <option *ngFor="let article of data | keyvalue" [value]="article.key">
        {{ article.key }}
        </option>
     </select>
  <div>
  <!--I would like the contect of this do change based on what's selected in the dropdpwn but varaibles created in the context of ng-template are readonly hence nh-model doesnt work-->
  <div>{{ data['article 1'] }}</div>
</div>

現在根據下拉列表中選擇的值，我希望它下面的內容發生變化。 但由於它是一個模板，我創建的任何變量都是只讀的，不能在ngModel的select中使用。 我也不能使用外部變量列表，因為數據屬性中的行是從 API 獲取的，我不能確定它將包含多少行。

有沒有辦法實現這一點？

Answer 1

如果它只是能夠在文章之間更改 de，您可以在不將 ngModel 綁定到屬性並通過模板變量訪問 ngModel 值的情況下做到這一點。

會是這樣的。

<div class="row">
  ...
  <select ngModel #articleSelected="ngModel">
    ...
  </select>

  <div>
    <div>{{ data[articleSelected.value] }}</div>
  </div>
</div>

干杯

Answer 2

情況是您沒有將 ngModel 綁定到的變量（引用對象）。

我使用單獨的 map 作為參考集合為您完成了一個簡單的實現。 我也使用這些數據動態創建了引用的 map。

看看這個stackblitz

HTML

  <ng-template #OpRef2 let-data="data" let-id="id">
    <div class="row">
      <h2>Row ID: {{ id }}</h2>
      <select [(ngModel)]="valueHolders.get(id).value">
        <!--Using ng model here doesnt work-->
        <option *ngFor="let article of data | keyvalue" [value]="article.key">
          {{ article.key }}
        </option>
      </select>
      <!--I would like the contect of this do change based on what's selected in the dropdpwn but varaibles created in the context of ng-template are readonly hence nh-model doesnt work-->
      <div>{{ data[valueHolders.get(id).value] }}</div>
    </div>
  </ng-template>

TS

  valueHolders = new Map<string, ValueHolder>(); 

  createValueHoldersByData(){
    Object.keys(this.data).forEach(key=>{
      const valueHolder = new ValueHolder(key, Object.keys(this.data[key])[0]);
      this.valueHolders.set(key, valueHolder);
    }); 
  }

  export class ValueHolder{
    key: string;
    value: string;
    constructor(key: string, value: string){
      this.key = key;
      this.value = value;
    }
  }

Answer 3

我建議在您的組件 class （例如selectedData ）中創建一個新屬性來保存下拉列表中的選定值，然后通過id將ngModel綁定到它。

您可以嘗試以下方法：

<!-- 
  In your component class, define a selectedData with and assign an empty object to it,
  to be used in the component's template: `selectedData = {};`
-->
<ng-template #OpRef2 let-data="data" let-id="id">
  <div class="row">
    <h2>Row ID: {{ id }}</h2>
    <!-- Use ngModel to bind to the selected value -->
    <select [(ngModel)]="selectedData[id]">
      <option *ngFor="let article of data | keyvalue" [value]="article.key">
        {{ article.key }}
      </option>
    </select>
    <div>
      <!-- Here we can use the selected[id] to bind to the selected value -->
      <div>{{ data[selectedData[id]] }}</div>
    </div>
  </div>
</ng-template>