ng-options 相关问题

滚动到底部可通过 Angular 中的 API 加载更多动态项

设备 <div class="col-6"> <label>device</label> <div class="input-group" style="height: 400px; overflow-y: auto;" (scroll)="onScroll($event)"> <ng-select formControlName="device_id" [items]="extractedOptions" bindLabel="label" bindValue="value" placeholder="Select device" appendTo="body" [multiple]="true" > <ng-template ng-label-tmp let-item="item"> {{ item.label }} </ng-template> <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index"> {{ item.label }} </ng-template> </ng-select> <div style="color: red" *ngIf="shouldDisplayError('device_id') && hardwareform.get('device_id')!.hasError('required')"> *Field is required </div> </div> </div> import { Component, ElementRef, HostListener, ViewChild } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; import { MatSnackBar } from '@angular/material/snack-bar'; import { DeviceService } from 'src/app/admin/services/device-device/device.service'; import { catchError, map } from 'rxjs/operators'; import { Observable, throwError } from 'rxjs'; @Component({ selector: 'app-create-device', templateUrl: './create-device.component.html', styleUrls: ['./create-device.component.scss'], }) export class DeviceComponent { @ViewChild('deviceSelect') deviceSelect!: ElementRef; deviceform!: FormGroup; loading: any; options: any = []; totalCount: any; extractedOptions: any; constructor( private fb: FormBuilder, private route: Router, private activatedRoute: ActivatedRoute, private _snackBar: MatSnackBar, private deviceService: DeviceService, ) {} title: string = 'New Device'; page: number = 1; IsEdit: boolean = false; items_per_page: number = 10; ngOnInit() { this.loadOptions(); } loadOptions() { this.loading = true; this.deviceService.getData(10, this.page).subscribe((response: any) => { const records = response.data.records; this.totalCount = response.data.count.total; this.extractedOptions = records.map((record: any) => ({ label: record.name, value: record.id, })); this.options = this.options.concat(this.extractedOptions); this.page++; this.loading = false; }); } shouldDisplayError(controlName: string): boolean { const control = this.deviceform.get(controlName); return control ? control.touched : false; } @HostListener('scroll',['$event']) onScroll(event: any) { console.log("testing") const target = event.target || event.srcElement; if (target.offsetHeight + target.scrollTop >= target.scrollHeight) { // Fetch more options when scrolled to the bottom this.loadOptions(); } } } 这是我的 HTML 和 TypeScript 文件。我成功地通过这些文件在 ng-select 下拉列表中获取了 10 条记录。但是，当我到达 ng-options 的底部时，滚动事件不会触发。我希望它触发滚动事件，以便我可以将更多动态内容加载到我的 ng-options 中。 我还检查了控制台是否有错误消息，但没有报告错误。 ng-select已经支持虚拟滚动。请利用此功能来适合您的代码！请在下面找到一个工作示例！ import { Component, ElementRef, ViewChild } from '@angular/core'; import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { RouterModule } from '@angular/router'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { NgSelectModule } from '@ng-select/ng-select'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-root', standalone: true, imports: [ FormsModule, NgSelectModule, CommonModule, ReactiveFormsModule, RouterModule, ], template: ` <div class="col-6"> <label>device</label> <div class="input-group" style="height:100vh;"> <ng-select [virtualScroll]="true" [items]="extractedOptions" bindLabel="label" bindValue="id" placeholder="Select device" (scroll)="onScroll($event)" (scrollToEnd)="onScrollToEnd()" [multiple]="true" > <ng-template ng-label-tmp let-item="item"> {{ item.label }} </ng-template> <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index"> {{ item.label }} </ng-template> </ng-select> </div> </div> `, }) export class App { @ViewChild('deviceSelect') deviceSelect!: ElementRef; deviceform!: FormGroup; loading: any; options: any = []; totalCount: any; extractedOptions: any = []; numberOfItemsFromEndBeforeFetchingMore = 10; constructor() {} title: string = 'New Device'; page: number = 1; IsEdit: boolean = false; items_per_page: number = 10; ngOnInit() { this.loadOptions(); } loadOptions() { console.log('asdf') this.loading = true; const start = this.page; const data = new Array(50).fill(null).map((item, i) => ({ name: start + i, id: start + i, })); of({ data: { records: data, count: { total: 100, }, }, }) // .pipe(delay(1000)) .subscribe((response: any) => { const records = response.data.records; const extractedOptions = records.map((record: any) => ({ label: record.name, value: record.id, })); this.totalCount = response.data.count.total; this.extractedOptions.push(...extractedOptions); this.extractedOptions = [...this.extractedOptions] this.page++; this.loading = false; }); } onScrollToEnd() { this.loadOptions(); } onScroll(event: any) { console.log(event, this.extractedOptions.length); if (this.loading || this.extractedOptions.length > this.totalCount) { return; } if (event.end >= this.extractedOptions.length) { this.loadOptions(); } } shouldDisplayError(controlName: string): boolean { const control = this.deviceform.get(controlName); return control ? control.touched : false; } // @HostListener('scroll', ['$event']) // onScroll(event: any) { // console.log('testing'); // const target = event.target || event.srcElement; // if (target.offsetHeight + target.scrollTop >= target.scrollHeight) { // // Fetch more options when scrolled to the bottom // this.loadOptions(); // } // } } bootstrapApplication(App); 堆栈闪电战

无法读取未定义的“已禁用”属性

我有一个 Angular JS 应用程序。在此我有一个下拉菜单，我可以通过键入并按 Enter 键来创建新选项。但是，当我按 Enter 键时，我收到一些 JS 异常 我在这里...

ValueError：url 版本 115.0.5790.110 没有此类驱动程序

嗨，我在 Windows 10 上使用 Selenium，自从 2 天以来，我一直收到以下错误，最初我没有遇到此错误 WebDriverException：消息：“chromedriver”可执行文件需要位于 PATH 中。

How to set programmatically selected default option value in ng-select dropdown in angular

我正在使用“@ng-select/ng-select”：“^8.1.1”，并且可以创建一个包含获取值的工作下拉列表，我希望选择默认值但它不起作用。任何建议...

Angular。选择有对象数组的盒子

我对Angular非常非常陌生......这两天我一直在尝试解决一个问题。但不是我的google-fu很弱，就是我的脑子太笨了，由于强行喂养它而无法理解......。

在ng-options中使用排除值。

我一直在试图找出如何使用过滤器从ng-options生成的数组中排除一个值，但没有成功。下面的代码段生成的数组会生成以下数组["..."。

带条件的ng-选项过滤器

我有一个带有ng-options + filter的select，需要对过滤器本身应用一个条件。因此，如果满足特定的条件，那么应用过滤器，否则不要。先谢谢你。# 示例 if (...

AngularJS自定义指令使用ng-options从服务中填充。

我在这个问题上真的遇到了困难，我知道我可能漏掉了一些东西，但我卡住了，需要帮助。我想做的是使用一个服务来填充ng-options中的选项。

具有多个条件的ng-options

我有一个选择，该选择的过滤器设置为如果ng-if中满足特定条件，则不显示数组（public，publicExtra和private）中的“ public”字符串。但是现在我发现那不是...

AngularJS select在没有ng-model的情况下不起作用

有人知道为什么在AngularJS中，如果没有ng-model，select选择器不起作用？

AngularJS选择元素选择问号值，与ngmodel相关

出于某种原因，我的ng模型对于AngularJS编译的选择选项无效。这是常见的问题，但我在这里找不到能解决问题的解决方案。选择在tr元素内，重复...

从控制器中为` `选择``值“

如何以编程方式为angularjs 1.5提供默认选择的值

我想在下拉菜单中添加“选择银行”选项。我只希望列表（库）中有多个项目时才选择该选项。这是代码：这是我当前拥有的：

ng-options不选择选项数组中的最后一项

我有一个奇怪的问题，我无法在Plunker上重现。当在模型中设置第一个选项“user”时，select会正确显示它并将其设置为“user”。当我加载另一个用户时......

如何通过深度克隆问题解决角度ng-options跟踪？

ng-options =“branch as branch.name for branches in ordersItemClientInfo.branches track by branch.id”在我的例子中，“branches”是一个对象数组，每个对象都有字段引用到如此深的对象（map ...

AngularJs：鼠标悬停到使用ng-options下拉列表的单个值的工具提示

我使用'选项'标签将ng-options用于下拉列表。我必须从下拉列表中一次只选择一个选项。从下拉菜单中选择选项时，我必须在我悬停鼠标时显示工具提示...

选择使用ng-options中的值不会填充

这是一个基本查询，但由于某种原因失败并需要帮助。尝试编辑实体时没有填充值。它应显示从此属性的db返回的值，但它...

angularjs 1.7选择下拉列表显示额外的选项值

我想在我的应用程序中将angularjs从1.5迁移到1.7。我的模型数据如下：$ scope.colors = [{name：'black'，shade：'dark'}，{name：'yellow'，shade：'light'}]; $ scope.myColor =''; ...

AngularJS如何将data-image属性添加到选项中

我想将自定义数据属性添加到选项标记。例如： Val 1 Val 2 ...

angular使用ng-options将空格视为null

在控制器中，我有一个像'Pipe'这样的数组：'|'，'逗号'：'，'，'Tab'：'\ t'};在ng-options中，即时使用它