typescript 是否可以在ngif条件下使用[maxSelectedLabels]属性?

5gfr0r5j  于 2023-02-25  发布在  TypeScript
关注(0)|答案(2)|浏览(138)

我正在使用Prime NG多选组件,并且希望在选中3个以上复选框时显示selectedItemsLabel="{0} Selected”,但如果选中了所有复选框,则应在占位符中显示selectedItemsLabel=“All”。
我是Angular 的新手,我一直在关注这个MultiSelect组件的文档,但它没有显示能够实现属性的多个条件的选项,我想知道这是否可能。
可能的示例

<ng-template pTemplate="filter" let-value let-filter="filterCallback">
                            <p-multiSelect
                                [ngModel]="value"
                                [options]="routeOptions"
                                placeholder="Any"
                                (onChange)="filter($event.value)"
                                optionLabel="name"
                                selectedItemsLabel="{0} selected"
                                [maxSelectedLabels]="3"
                            >
                                <ng-template let-option pTemplate="item">
                                    <div>
                                        <span class="p-ml-1">{{ option.name }}</span>
                                    </div>
                                    <div *ngIf="[maxSelectedLabels="routeOptions.length - 1"] Then selectedItemsLabel="All"></div>
                                </ng-template>
                            </p-multiSelect>
                        </ng-template>
rdlzhqv9

rdlzhqv91#

可以。首先用**#**为组件指定一个ref,如下所示:

<p-multiSelect
  #myMultiSelect
  [ngModel]="value"
  [options]="routeOptions"
  placeholder="Any"
  (onChange)="filter($event.value)"
  optionLabel="name"
  selectedItemsLabel="{0} selected"
  [maxSelectedLabels]="3"
  >
.......

然后您就可以访问它:

<div *ngIf="myMultiSelect.maxSelectedLabels === routeOptions.length - 1">Im visible</div>

如果maxSelectedLables的选项是routeOptions的length-1,则div可见。这就是ngIf的工作原理

但是

这不是你想要的。你想要设置selectedItemsLabel属性。你没有正确理解它。你设置maxSelectedLables为3作为例子直接设置selectedItemsLabel,太! selectedItemsLabel的文本将只在需要时显示(由组件控制)。

<h5>Basic</h5>
<p-multiSelect #meins [options]="cities" [(ngModel)]="selectedCities" defaultLabel="Select a City" optionLabel="name"
  [maxSelectedLabels]="3" selectedItemsLabel="{0} items selected">
</p-multiSelect>

快看斯塔克 lightning 战!
ng-primedocumentation也会有所帮助,它会说:

    • selectedItemsLabel:**超过最大选定标签数后显示的标签,例如(选定了{0}个项目),默认为"省略号"关键字以指示文本溢出。

更新日期:2023年2月18日

你想显示"ALL"只有当所有的项目被选中。所以添加onChange事件和bindselectedItemsLabel。为什么绑定?它有一些问题,其中的一个条件。所以我们把它放在代码中。

    • 超文本标记语言**
<p-multiSelect [options]="cities" [(ngModel)]="selectedCities" defaultLabel="Select a City" optionLabel="name"
  [maxSelectedLabels]="2" [selectedItemsLabel]="bindTest" (onChange)="onChange()">
</p-multiSelect>

在代码中,对onChange执行以下操作:

    • 代码**
onChange() {
    if (this.selectedCities.length === this.cities.length) {
      this.bindTest = "ALL";
      this.changeRef.detectChanges();
    }
     else {
       this.bindTest = "{0} items selected";   
       this.changeRef.detectChanges();
    }
  }

现在一切都如你所愿了。重要的是:我们使用changeRef.detectChanges();没有这个组件选定的文本将不会直接更改。导入到组件构造函数:

constructor(
    private countryService: CountryService,
    private primengConfig: PrimeNGConfig,
    private changeRef: ChangeDetectorRef
  ) {
.....
8yoxcaq7

8yoxcaq72#

我对这个问题做了一个堆栈 lightning 战:https://stackblitz.com/edit/primeng-tablefilter-demo-ipt7y1?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

  • (向左展开页面以查看堆栈 lightning 战中的列筛选器)*

如果你注意到,清除按钮不再清除选中的文本框。经过一些测试,似乎[(ngModel)]打破了它,我认为它与双向绑定有关?它没有显示在stackblitz中,但如果你包括

(onChange)="filter($event.value)"

清除按钮仍然**从表格中清除过滤器,**但不在选定的文本框中。
我发现有一处房产

[showClear]="true"

这在文本框的末尾添加了一个X,将其清除。可悲的是,样式/定位不是我所需要的。
有什么方法可以修复清除按钮?添加一个ts函数来清除选中的值?如果是这样,如何将其绑定到清除按钮,因为它是从

<p-columnFilter
          display="menu"

menu属性,我没有运气找到尝试向该按钮添加/更改功能的方法。

相关问题