本次紀錄如何從下拉選單將選取到的 value 渲染在畫面上。
情境
本次需求為當我選擇到下拉選單後,按下按鈕後要把所選到的 value 值渲染在畫面上,如下圖。
演示資料
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| data = [ { key: "101", value: "項目一", }, { key: "102", value: "項目二", }, { key: "103", value: "項目三", }, ];
|
實作一:直接取 DOM
起初我想到的是使用 ElementRef
的方法,直接去控制 DOM 元素,我使用 formControlName 的方式去取得下拉選單的內容。
app.component.html
1 2 3 4 5 6 7 8 9 10 11
| <form [formGroup]="selectForm"> <select class="select" formControlName="select"> <option class="option" value="" disabled>請選擇項目</option> <option class="option" [value]="item.key" *ngFor="let item of data"> {{item.value}} </option> </select> <button type="button" class="btn btn-primary" (click)="clickBtn()"> 按我看選到的值 </button> </form>
|
app.component.ts
1 2 3 4 5 6
| clickBtn() { this.selectKey = this.selectForm.get('select').value; this.selectValue = this._el.nativeElement.querySelector( '.option' ).innerText; }
|
這樣的確可以取到下拉選單的 value,但是官方文件表示不建議直接控制 DOM 元素取值,會容易導致 XSS 攻擊。
實作二:使用 filter
這邊改用 filter 方法取值,概念是當我選到的下拉選單去跟我的 item 去比對,如果取到一樣的 key,我就把該筆 key 值的 value 渲染到網頁上。
1 2 3 4 5 6
| clickBtn() { this.selectKey = this.selectForm.get('select').value; this.data.filter(item=>{ console.log(item) }) }
|
console.log
出的內容會是 data 資料。
那我就按照剛剛的想法時作此內容。
1 2 3 4 5 6 7 8 9 10
| clickBtn() { this.selectKey = this.selectForm.get('select').value;
this.data.filter(item => { if (item.key === this.selectKey) { this.selectValue = item.value; } }); }
|
可以得到跟第一個實作相同的結果,但安全就差很多。
Demo
連結