0%

Angular 筆記 - 取得下拉選單的 value 並渲染在網頁上

angular

本次紀錄如何從下拉選單將選取到的 value 渲染在畫面上。

情境

本次需求為當我選擇到下拉選單後,按下按鈕後要把所選到的 value 值渲染在畫面上,如下圖。

select

演示資料

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 資料。

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;
}
});
}

可以得到跟第一個實作相同的結果,但安全就差很多。

filter

Demo

連結