如何在使用 *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>