Question

我正在使用以下代码段来使用ng-select的多选功能：

 <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>

然后我得到输出：

选中复选框并选择项目。

但是当我使用时：

    <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

Answer 1

我找到了解决方案，item$ template变量在ng-select的v2.3.0中发布。

let-item =“ item”和let-item $ =“ item $”有什么区别？

1 个答案: