รวมปัญหา Angular + Clarity

สรุปปัญหาที่เจอบ่อยๆ ไว้กันลืม

ช่วงนี้ผมใช้ Angular ในการพัฒนาเป็นหลักและ ui framework ที่เลือกใช้คือ Clarity Design System ข้อดีของตัวนี้คือเป็น ui สำหรับ Angular เลยมี component พื้นฐานต่างๆ ให้ใช้งานครบและในตัวอย่างการใช้งานต่างๆ จะมี UX guidelines ให้ดูด้วย

ปัญหา Datagrid ไม่แสดงรายการข้อมูลถ้านำไปไว้ใน Tabs

ถ้าหากจำนวนแถวที่แสดงยังไม่ถึงจำนวนที่ต้องแบ่งหน้าข้อมูลจะแสดงปกติเช่น เราตั้งค่าแบ่งหน้าไว้ 10 แถวต่อหน้า ถ้ายังไม่ถึงจะแสดงรายการปกติ แต่ถ้าถึงเมื่อไหร่จะไม่แสดงเลยตามตัวอย่างภาพ

ปัญหาเกิดจากไม่ได้ตั้งค่า *clrIfActive ของ tag <clr-tab-content> ให้ใส่ค่า <clr-tab-content *clrIfActive> ในทุก tab ก็จะกลับมาแสดงผลเป็นปกติ

ปัญหาการใช้ Datagrid กับ event (clrDgRefresh) ค้นข้อมูลแล้วไม่แสดงรายการที่ค้นเจอ

ทั้งๆ ที่ตรวจสอบจาก api มีข้อมูลแต่ datagrid ไม่นำมาแสดงผล

ปัญหาเกิดจากตรง clr-dg-row เราใช้ *clrDgItems ในการลูปซึ่งมันจะมีการผูกข้อมูลกับการ filter ของ array อัตโนมัติ แต่ข้อมูลที่เราค้นนั้นมันมาจากฝั่ง api ข้อมูลจึงไม่ตรงกันให้เปลี่ยนไปใช้ *ngfor แทน ก็จะสามารถใช้งานได้ปกติเวลาค้นจะไปค้นที่ฝั่ง api ทันที

ปัญหาการดึงค่าจาก Date Picker ที่ตั้ง Locale เป็น Th

ปกติค่าที่ได้จะอยู่ในรูปแบบ DD/MM/YYYY เราสามารถแปลงให้เป็น YYYY-MM-DD ได้ง่ายๆ โดยใช้ split(‘/’) และ reverse(‘-’)

let date = this.form.value.startDate.split('/').reverse().join('-');
// form 21/03/2020 to 2020-03-21

Ng-if & Hide

ถ้าหากเราต้องการซ่อน component ต่างๆ แต่ยังต้องการให้มันทำงานอยู่ เช่น event ต่างๆ ให้เปลี่ยนไปใช้ [hidden] แทน ตัว component จะไม่ได้ถูกทำลายไปแค่ซ่อนไว้เฉยๆ

Angular build prod error “budgets: total exceeded maximum budget”

ให้แก้ config ที่ไฟล์ angular.json ค้นหาคำว่า budgets เพิ่มค่าเป็นดังนี้

"budgets": [
{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}, 
 ...
]

ตั้งค่า clr-vertical-nav ให้จำค่าการย่อขยาย

ngOnInit(): void {
this.initCollapsed();
}
initCollapsed() {
const collapsed = localStorage.getItem('collapsed');
if (collapsed === '1') {
this.collapsed = true;
} else {
this.collapsed = false;
}
}
set collapsed(value: boolean) {
localStorage.setItem('collapsed', value ? '1' : '0');
this._collapsed = value;
}
get collapsed() {
const collapsed = localStorage.getItem('collapsed');
this._collapsed = collapsed === '1' ? true : false;
return this._collapsed;
}

ตั้งค่าดังนี้

ตั้งค่า clrDgSelected แต่คลิกแล้วมันเลือกทุกรายการ!

ปัญหาเกิดจากตั้งค่าไม่ครบ ของ clr-datagrid ในส่วนที่วนลูปแสดงข้อมูลให้ใส่ clrDgItem เข้าไปเพื่อให้ datagrid รู้ว่าแต่ละ item มีรายการเป็นยังไง

เพิ่ม DataGrid ใน modal แล้วไม่แสดง

รายละเอียด https://github.com/vmware/clarity/issues/2443

แก้ง่ายๆ โดย ใส่ ngIf เข้าไปโดยใช้ค่าตัวแปรเดียวกันที่ใช้เปิดตัว modal

<clr-modal [clrModalSize]="'lg'" [(clrModalOpen)]="openModal">

ใส่ส่วนของ datagrid ให้ใช้ ngif กับตัวแปรเดียวกันเพื่อให้เปิดใช้งานพร้อมๆ กัน

<clr-datagrid *ngIf="openModal" [clrDgLoading]="loading">