[Angular] 用checkbox篩選出來的內容連動畫面顯示，用push() 和 includes()
前情提要
https://charleswang0319.blogspot.com/2019/11/angular-material-input-autocomplete.html
所以已經有演算法了
現在要連動顯示
顯示 HTML
讓顯示隱藏連動一個function叫做showQuestion
然後傳我們對該題目自訂的值進去
<!-- 有無退票紀錄： -->
<div
[fxShow]="showQuestion(10)"
>
<div class="">
<h4>有無退票紀錄：</h4>
</div>
<div class="">
<div class="">
<p>有無退票紀錄</p>
</div>
<mat-radio-group aria-label="Select an option" fxLayoutGap="16px">
<mat-radio-button value="有">有</mat-radio-button>
<mat-radio-button value="無">無</mat-radio-button>
</mat-radio-group>
</div>
</div>
<!-- 開戶及投資交易目的（可複選）： -->
<div
[fxShow]="showQuestion(20)"
>
<div class=""><h4>開戶及投資交易目的（可複選）：</h4></div>
<div class="">
<p>開戶及投資交易目的（可複選）：</p>
<section class="">
<mat-checkbox>財富累積</mat-checkbox>
<mat-checkbox>子女教育基金</mat-checkbox>
<mat-checkbox>退休規劃</mat-checkbox>
<mat-checkbox>節稅規劃</mat-checkbox>
<mat-checkbox>資產移轉</mat-checkbox>
<mat-checkbox>避險</mat-checkbox>
<div class="">
<mat-checkbox [(ngModel)]="ChooseAccountOpeningPurposeOther"
>其他</mat-checkbox
>
<mat-form-field [fxShow]="ChooseAccountOpeningPurposeOther == true">
<input matInput placeholder="其他" />
</mat-form-field>
</div>
</section>
</div>
</div>
顯示 TS
連去service 然後再從service連回來
// 控制題目顯示
showQuestion(qid) {
this.kycQuestionService.showQuestion(qid);
return this.kycQuestionService.showQuestion(qid);
}
service
想法為把篩出來的物件
抓出id (這邊用qid)後用push丟進陣列
然後再靠includes()方法去比較傳出true / false
再把true / false結果回傳
// 從題目頁面連過來觸發顯示方法
showQuestion(qid) {
const qidArray = [];
let showResult = false;
for (const i of this.package) {
qidArray.push(i.qid);
}
showResult = qidArray.includes(qid);
return showResult;
}
如此一來
HTML的
[fxShow] = true
就會顯示了
附上不重要的
題目 service
// 按照KYC模板對題目編碼
questionLists: Question[] = [
{ qid: 10, businessQType: ['TSTK'], checked: false },
{
qid: 20,
businessQType: ['TSTK', 'FUTB', 'SUBB', 'FNCM', 'OSUB', 'STUN'],
checked: false,
},
{ qid: 30, businessQType: ['TSTK'], checked: false },
{
qid: 40,
businessQType: ['TSTK', 'FUTB', 'SUBB', 'FNCM', 'OSUB', 'STUN'],
checked: false,
},
{
qid: 50,
businessQType: ['FUTB', 'SUBB', 'FNCM', 'OSUB', 'STUN'],
checked: false,
},
{
qid: 60,
businessQType: ['FUTB', 'SUBB', 'FNCM', 'OSUB'],
checked: false,
},
{
qid: 70,
businessQType: ['FUTB'],
checked: false,
},
{
qid: 80,
businessQType: ['FUTB'],
checked: false,
},
{
qid: 90,
businessQType: ['TSTK', 'FUTB', 'SUBB', 'FNCM', 'OSUB'],
checked: false,
},
{
qid: 100,
businessQType: ['TSTK', 'FUTB'],
checked: false,
},
{
qid: 110,
businessQType: ['TSTK', 'OSUB'],
checked: false,
},
{
qid: 120,
businessQType: ['TSTK'],
checked: false,
},
{
qid: 130,
businessQType: ['TSTK', 'FUTB', 'SUBB', 'FNCM', 'OSUB', 'STUN'],
checked: false,
},
{
qid: 140,
businessQType: ['SUBB', 'FNCM', 'OSUB'],
checked: false,
},
{
qid: 150,
businessQType: ['OSUB'],
checked: false,
},
{
qid: 160,
businessQType: ['SUBB', 'FNCM', 'OSUB'],
checked: false,
},
{
qid: 170,
businessQType: ['TSTK'],
checked: false,
},
{
qid: 180,
businessQType: ['STUN'],
checked: false,
},
{
qid: 190,
businessQType: ['STUN'],
checked: false,
},
{
qid: 200,
businessQType: ['STUN'],
checked: false,
},
{
qid: 210,
businessQType: ['STUN'],
checked: false,
},
{
qid: 220,
businessQType: ['STUN'],
checked: false,
},
{
qid: 230,
businessQType: ['STUN'],
checked: false,
},
{
qid: 240,
businessQType: ['STUN'],
checked: false,
},
{
qid: 250,
businessQType: ['FNCM', 'OSUB', 'STUN'],
checked: false,
},
{
qid: 260,
businessQType: ['FNCM', 'OSUB', 'STUN'],
checked: false,
},
{
qid: 270,
businessQType: ['FNCM', 'STUN'],
checked: false,
},
{
qid: 280,
businessQType: ['OSUB'],
checked: false,
},
{
qid: 290,
businessQType: ['OSUB'],
checked: false,
},
{
qid: 300,
businessQType: ['OSUB'],
checked: false,
},
{
qid: 310,
businessQType: ['FNCM'],
checked: false,
},
{
qid: 320,
businessQType: ['OSUB'],
checked: false,
},
{
qid: 330,
businessQType: ['FNCM'],
checked: false,
},
{
qid: 340,
businessQType: ['FNCM'],
checked: false,
},
{
qid: 350,
businessQType: ['FNCM', 'OSUB'],
checked: false,
},
{
qid: 360,
businessQType: ['FNCM'],
checked: false,
},
{
qid: 370,
businessQType: ['OSUB'],
checked: false,
},
];
留言
張貼留言