如何在使用*ngFor重复的ng模板中使用ngModel

Question

我有一个ng-template，它使用*ngFor重复。我正在使用ngTemplateOutletContext将其他数据从ngFor传递到模板。有了这些数据，我正在传递给模板，我正在创建一个下拉列表。我有一个堆叠的例子，展示了我所做的事情的代码摘录。

数据

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绑定到.

我为您做了一个简单的实现，使用一个单独的映射作为参考集合。我也使用这些数据动态地创建了引用映射。

看看这个堆叠式

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

我建议在组件类(例如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>