API ของ Combobox · Needless UI

Import

import-combobox.ts

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

NuiCombobox

ช่องข้อความที่เสนอตัวเลือกให้ขณะพิมพ์

Selector: nui-combobox

NuiCombobox: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`options`Input	`NuiOption<V>[]`		ตัวเลือกต่าง ๆ ในรูปออบเจกต์ `NuiOption`
`value`สองทาง	`V \| null`	`null`	ค่าที่เลือก หรือ `null` ใช้กับฟอร์มได้ด้วย
`values`สองทาง	`readonly V[]`	`[]`	ค่าทั้งหมดที่เลือก เมื่อใช้ `multiple`
`multiple`Input	`boolean`	`false`	ให้เลือกได้หลายตัวเลือก โดยแสดงเป็นชิป
`create`Input	`(text: string) => V`		สร้างค่าจากข้อความที่พิมพ์ รายการจะเสนอให้เพิ่มข้อความที่ยังไม่ใช่ตัวเลือก
`filtering`Input	`boolean`	`true`	กรองตัวเลือกขณะพิมพ์ ปิดไว้เมื่อเซิร์ฟเวอร์เป็นผู้กรอง
`loading`Input	`boolean`	`false`	แสดงแถวกำลังโหลดระหว่างรอผลลัพธ์
`clearable`Input	`boolean`	`false`	เพิ่มปุ่มล้างค่า และให้กด Esc เพื่อล้างค่าได้
`placeholder`Input	`string`	`''`	ข้อความที่แสดงขณะช่องยังว่าง
`label`Input	`string`		ชื่อที่เข้าถึงได้ เมื่อไม่มี `<label>` ตั้งชื่อให้ช่อง
`inputId`Input	`string`		id ของช่องข้อความ สำหรับ `<label for>`
`disabled`Input	`boolean`	`false`	ปิดใช้งานช่อง
`compareWith`Input	`(a: V, b: V) => boolean`	`Object.is`	บอกว่าค่าสองค่าเป็นตัวเลือกเดียวกันหรือไม่ สำหรับค่าที่เป็นออบเจกต์
`displayWith`Input	`(value: V) => string`	`String`	ข้อความสำหรับค่าที่ไม่อยู่ในตัวเลือก เช่น ค่าที่ตั้งไว้ก่อนตัวเลือกจะโหลดเสร็จ
`virtual`Input	`boolean \| 'auto'`	`'auto'`	เรนเดอร์เฉพาะแถวที่มองเห็น: ทุกครั้ง ไม่เลย หรือ `auto` เมื่อเกิน 200 แถว
`queryChange`Output	`string`		ส่งข้อความออกมาขณะพิมพ์ สำหรับการค้นหาที่เซิร์ฟเวอร์
`openChange`Output	`boolean`		ส่งค่าออกมาเมื่อรายการเปิดหรือปิด
`show`เมธอด	`() => void`		เปิดรายการ
`hide`เมธอด	`() => void`		ปิดรายการ
`clear`เมธอด	`() => void`		ล้างค่าและข้อความ
`focus`เมธอด	`(options?: FocusOptions) => void`		โฟกัสที่ช่องข้อความ

ข้อความทุกส่วนที่แสดงหรือประกาศก็เป็น input เช่นกัน จึงแปลได้: emptyLabel loadingLabel clearLabel toggleLabel chipsLabel removeLabel createLabel

NuiOptionTemplate

ใส่ไว้ที่ ng-template ภายในคอมโพเนนต์เพื่อวาดแต่ละแถวเอง context จะมีตัวเลือกและแถวของตัวเลือกนั้น

Selector: ng-template[nuiOptionTemplate]

NuiOptionText

วาดป้ายกำกับของตัวเลือกพร้อมทำเครื่องหมายตัวอักษรที่ตรงกัน รวมถึงคำอธิบายและเส้นทางของตัวเลือก สำหรับแถวที่คุณวาดเอง

Selector: [nuiOptionText]

NuiOptionText: พร็อพเพอร์ตี
ชื่อ	ชนิด	ค่าเริ่มต้น	คำอธิบาย
`nuiOptionText`Input	`NuiOptionRow<V>`		แถว ซึ่งได้จาก context ของเทมเพลต