【问题标题】:What is the difference between let-item="item" and let-item$="item$"?let-item="item" 和 let-item$="item$" 有什么区别?
【发布时间】:2020-09-15 10:27:46
【问题描述】:

我正在使用以下代码 sn-p 来使用 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

【问题讨论】:

    标签: angular multi-select let angular-ngselect


    【解决方案1】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-02-09
      • 2019-11-28
      • 2020-05-22
      • 1970-01-01
      • 1970-01-01
      • 2020-12-18
      • 1970-01-01
      • 2018-09-07
      相关资源
      最近更新 更多