let-item="item" 和 let-item$="item$" 有什么区别?
What is the difference between let-item="item" and let-item$="item$"?
我正在使用以下代码片段来使用 ng-select 的 multiselect 功能:
<form [formGroup]="personalForm">
<div style="background-color: gainsboro">
<div formArrayName="other"
*ngFor="let other of personalForm.get('other').controls; let i = index"
class="form-group">
<div [formGroup]="other">
<span for="filterName">{{other.controls.filterName.value}}</span>
<ng-select #ngSelect
formControlName="searchCreteria"
[items]="other.value.data"
[multiple]="true"
[virtualScroll]="true"
bindLabel="name"
[closeOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="name"
(paste)="onPaste($event,other,i)"
(clear)="removeCompletePanel(i)"
[selectOnTab]="true"
[(ngModel)]="selectedSearchCreteria[i]">
<!--<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
</ng-template>-->
<ng-template ng-option-tmp
let-item="item"
let-index="index">
<input style="visibility:visible;"
[ngModelOptions]="{standalone: true}"
[ngModel]="item.selected"
id="item-{{index}}"
type="checkbox" />
{{item.name | uppercase}}
</ng-template>
</ng-select>
</div>
</div>
</div>
<div class="row" style="padding: 10px 5px 0px 5px">
<div class="col-sm-6">
<button class="btn btn-light"
style="padding: 10px 35px; margin: 4px 0px 0px 15px;"
title="Press to clear all"
(click)="onClearAll()">
Clear All
</button>
</div>
<div class="col-sm-6 btn-group-" role="group" style="height: 100%; vertical-align: bottom; padding: 5px 0px">
<div class="text-center nav-justified" style="height: 100%">
<button #calculateButton
type="submit"
class="btn btn-fetch active"
(click)="calculateButtonClick()"
accesskey="c">
Fetch
</button>
</div>
</div>
</div>
</form>
当我使用:
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
</ng-template>
然后我得到输出:
选中复选框并select编辑项目。
但是当我使用:
<ng-template ng-option-tmp let-item="item" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item.selected" id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
</ng-template>
输出为:
因为我正在使用 Angular 5.2.11。所以 let-item$ 在那里不起作用,但是当我删除它时,复选框不起作用。有关详细信息,您可以查看示例 here
我找到了解决方案,ng-select 的 item$ template variable was released in v2.3.0。
我正在使用以下代码片段来使用 ng-select 的 multiselect 功能:
<form [formGroup]="personalForm">
<div style="background-color: gainsboro">
<div formArrayName="other"
*ngFor="let other of personalForm.get('other').controls; let i = index"
class="form-group">
<div [formGroup]="other">
<span for="filterName">{{other.controls.filterName.value}}</span>
<ng-select #ngSelect
formControlName="searchCreteria"
[items]="other.value.data"
[multiple]="true"
[virtualScroll]="true"
bindLabel="name"
[closeOnSelect]="false"
[clearSearchOnAdd]="true"
bindValue="name"
(paste)="onPaste($event,other,i)"
(clear)="removeCompletePanel(i)"
[selectOnTab]="true"
[(ngModel)]="selectedSearchCreteria[i]">
<!--<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
</ng-template>-->
<ng-template ng-option-tmp
let-item="item"
let-index="index">
<input style="visibility:visible;"
[ngModelOptions]="{standalone: true}"
[ngModel]="item.selected"
id="item-{{index}}"
type="checkbox" />
{{item.name | uppercase}}
</ng-template>
</ng-select>
</div>
</div>
</div>
<div class="row" style="padding: 10px 5px 0px 5px">
<div class="col-sm-6">
<button class="btn btn-light"
style="padding: 10px 35px; margin: 4px 0px 0px 15px;"
title="Press to clear all"
(click)="onClearAll()">
Clear All
</button>
</div>
<div class="col-sm-6 btn-group-" role="group" style="height: 100%; vertical-align: bottom; padding: 5px 0px">
<div class="text-center nav-justified" style="height: 100%">
<button #calculateButton
type="submit"
class="btn btn-fetch active"
(click)="calculateButtonClick()"
accesskey="c">
Fetch
</button>
</div>
</div>
</div>
</form>
当我使用:
<ng-template ng-option-tmp let-item="item" let-item$="item$" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item$.selected" id="item-{{index}}" type="checkbox" /> {{item.name | uppercase}}
</ng-template>
然后我得到输出:
选中复选框并select编辑项目。
但是当我使用:
<ng-template ng-option-tmp let-item="item" let-index="index">
<input [ngModelOptions]="{standalone: true}" [ngModel]="item.selected" id="item-{{index}}" type="checkbox"/> {{item.name | uppercase}}
</ng-template>
输出为:
因为我正在使用 Angular 5.2.11。所以 let-item$ 在那里不起作用,但是当我删除它时,复选框不起作用。有关详细信息,您可以查看示例 here
我找到了解决方案,ng-select 的 item$ template variable was released in v2.3.0。