API của Combobox · Needless UI

Import

import-combobox.ts

import { NuiCombobox, type NuiOption } from '@needless-ui/angular/select';

NuiCombobox

Ô nhập văn bản gợi ý các tùy chọn khi bạn gõ.

Selector: nui-combobox

NuiCombobox: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`options`Input	`NuiOption<V>[]`		Các tùy chọn, dưới dạng đối tượng `NuiOption`.
`value`Hai chiều	`V \| null`	`null`	Giá trị đã chọn, hoặc `null`. Cũng dùng được với biểu mẫu.
`values`Hai chiều	`readonly V[]`	`[]`	Các giá trị đã chọn, khi có `multiple`.
`multiple`Input	`boolean`	`false`	Cho phép chọn nhiều tùy chọn, hiển thị dưới dạng chip.
`create`Input	`(text: string) => V`		Tạo giá trị từ văn bản đã gõ. Khi đó danh sách đề nghị thêm văn bản chưa có trong các tùy chọn.
`filtering`Input	`boolean`	`true`	Lọc các tùy chọn khi bạn gõ. Hãy tắt đi khi máy chủ lọc thay.
`loading`Input	`boolean`	`false`	Hiển thị một dòng đang tải trong lúc chờ kết quả.
`clearable`Input	`boolean`	`false`	Thêm nút xóa giá trị, và cho phép phím Esc xóa giá trị.
`placeholder`Input	`string`	`''`	Văn bản hiển thị khi ô nhập còn trống.
`label`Input	`string`		Accessible name, khi không có `<label>` nào đặt tên cho ô nhập.
`inputId`Input	`string`		Id của ô nhập văn bản, dùng cho `<label for>`.
`disabled`Input	`boolean`	`false`	Vô hiệu hóa ô nhập.
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	Cho biết hai giá trị có phải cùng một tùy chọn hay không, dành cho giá trị là đối tượng.
`displayWith`Input	`(value: V) => string`	`String`	Văn bản cho giá trị không có trong các tùy chọn, chẳng hạn giá trị được đặt trước khi tùy chọn tải xong.
`virtual`Input	`boolean \| 'auto'`	`'auto'`	Chỉ render các dòng đang hiển thị: luôn luôn, không bao giờ, hoặc `auto` khi quá 200 dòng.
`queryChange`Output	`string`		Phát ra văn bản trong lúc gõ, để tìm kiếm trên máy chủ.
`openChange`Output	`boolean`		Phát ra khi danh sách mở hoặc đóng.
`show`Phương thức	`() => void`		Mở danh sách.
`hide`Phương thức	`() => void`		Đóng danh sách.
`clear`Phương thức	`() => void`		Xóa giá trị và văn bản.
`focus`Phương thức	`(options?: FocusOptions) => void`		Chuyển focus vào ô nhập văn bản.

Mọi văn bản mà component hiển thị hoặc đọc lên cũng là input, nên bạn có thể dịch chúng: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

Đặt lên một ng-template bên trong component để tự vẽ từng dòng. Context chứa tùy chọn và dòng của nó.

Selector: ng-template[nuiOptionTemplate]

NuiOptionText

Vẽ nhãn của tùy chọn với các chữ cái khớp được đánh dấu, cùng mô tả và đường dẫn của nó, cho các dòng do bạn tự vẽ.

Selector: [nuiOptionText]

NuiOptionText: Thuộc tính
Tên	Kiểu	Mặc định	Mô tả
`nuiOptionText`Input	`NuiOptionRow<V>`		Dòng, lấy từ context của template.