[Angular] 全擴充題目選項寫法1
HTML
<p>KYC題目</p>
<mat-card *ngFor="let aa of this.KycQuestionObj; let i = index">
<b>{{ aa.QTopic }}</b>
<mat-radio-group aria-label="Select an option">
<mat-radio-button
*ngFor="let bb of aa.QOption; let j = index"
[value]="j + 1"
(change)="KYCradioChange($event, aa)"
>{{ bb }}</mat-radio-button
>
<div class="" *ngIf="aa.QOptionIsFillIn">
<mat-radio-button
*ngFor="let cc of aa.QOptionFillInTopic; let k = index"
[value]="aa.QOption.length + k + 1"
(change)="KYCradioChange($event, aa)"
>{{ cc }}
<mat-form-field class="example-full-width">
<mat-label></mat-label>
<input
matInput
[value]="aa.QOptionFillInValue"
(input)="KYCinputChange($event.target.value, aa, k)"
/>
</mat-form-field>
</mat-radio-button>
</div>
</mat-radio-group>
</mat-card>
<b>KYC Array</b>
<pre>
{{ finalKYCArray | json }}
</pre>
TS檔
QQuestionFormIdList: [];
QQuestionTopicList: [];
QOptionFormIdList: [];
QOptionOptionList: [];
QOptionAnswerIdList: [];
// 讀取題目json
questionJson = [
{
QQuestionFormId: 'kycq0010',
QTopic: '一、這是題目1的題目',
QOptionFormId: 'kyco0010',
QOption: [
'(A)這是題目1的選項A',
'(B)這是題目1的選項B',
'(C)這是題目1的選項C',
'(D)這是題目1的選項D',
],
QOptionIsFillIn: true,
QOptionFillInTopic: ['其他1：', '其他2：'],
QOptionFillInValue: [''],
QAnswerFormId: 'kyca0010',
QAnswer: '',
},
{
QQuestionFormId: 'kycq0020',
QTopic: '二、這是題目2的題目',
QOptionFormId: 'kyco0020',
QOption: [
'(A)這是題目2的選項A',
'(B)這是題目2的選項B',
'(C)這是題目2的選項C',
'(D)這是題目2的選項D',
],
QAnswerFormId: 'kyca0020',
QAnswer: '',
},
{
QQuestionFormId: 'kycq0030',
QTopic: '三、這是題目3的題目',
QOptionFormId: 'kyco0030',
QOption: [
'(A)這是題目3的選項A',
'(B)這是題目3的選項B',
'(C)這是題目3的選項C',
'(D)這是題目3的選項D',
],
QAnswerFormId: 'kyca0030',
QAnswer: '',
},
];
// 讀取題目json2
questionJson2 = [
{
Question: {
QQuestionFormId: 'kycq0010',
QTopic: '一、這是題目1的題目',
},
Option: {
QOptionFormId: 'kyco0010',
QOption: [
{
OptionTopic: '(A)這是題目1的選項A',
},
{
OptionTopic: '(B)這是題目1的選項B填充題目',
QOptionIsFillIn: true,
QOptionFillInTopic: '預計給使用者填入選項內文的地方',
QOptionFillInValue: '預計給使用者填入答案的地方',
},
{
OptionTopic: '(C)這是題目1的選項C填充題目',
QOptionIsFillIn: true,
QOptionFillInTopic: '預計給使用者填入選項內文的地方',
QOptionFillInValue: '預計給使用者填入答案的地方',
},
{
OptionTopic: '(D)這是題目1的選項D',
QOptionIsFillIn: false,
},
{
OptionTopic: '(E)(其他)這是題目1的開放入選項E',
QOptionIsFillIn: true,
QOptionFillInTopic: '預計給使用者填入選項內文的地方',
QOptionFillInValue: '預計給使用者填入答案的地方',
},
],
},
Answer: {
QAnswerFormId: 'kyca0010',
QAnswer: '',
},
},
];
finalKYCArray: any[] = [];
KYCradioChange(event: MatRadioChange, data) {
let obj2 = this.questionJson.filter(
x => x.QQuestionFormId === data.QQuestionFormId,
)[0];
console.log(obj2);
obj2.QAnswer = event.value;
console.log(
this.finalKYCArray.some(x => x.QQuestionFormId === data.QQuestionFormId),
);
if (
!this.finalKYCArray.some(x => x.QQuestionFormId === data.QQuestionFormId)
) {
this.finalKYCArray.push(obj2);
}
}
// input框
KYCinputChange(event, data, index) {
let obj3 = this.questionJson.filter(
x => x.QQuestionFormId === data.QQuestionFormId,
)[0];
console.log(obj3);
let inputValue = event;
obj3.QOptionFillInValue.splice(index, index + 1, inputValue);
console.log('event', event);
console.log(
this.finalKYCArray.some(x => x.QQuestionFormId === data.QQuestionFormId),
);
if (
!this.finalKYCArray.some(x => x.QQuestionFormId === data.QQuestionFormId)
) {
this.finalKYCArray.push(obj3);
}
}
setObjDataToArray() {
this.QQuestionFormIdList = this.KycQuestionObj.map(x => x.QQuestionFormId);
this.QQuestionTopicList = this.KycQuestionObj.map(x => x.QTopic);
this.QOptionFormIdList = this.KycQuestionObj.map(x => x.QOptionFormId);
this.QOptionOptionList = this.KycQuestionObj.map(x => x.QOption);
this.QOptionAnswerIdList = this.KycQuestionObj.map(x => x.QAnswerFormId);
console.log('this.QQuestionFormIdList', this.QQuestionFormIdList);
console.log('this.QQuestionTopicList', this.QQuestionTopicList);
console.log('this.QOptionFormIdList', this.QOptionFormIdList);
console.log('this.QOptionOptionList', this.QOptionOptionList);
console.log('this.QOptionAnswerIdList', this.QOptionAnswerIdList);
}
參考
https://stackblitz.com/edit/angular-iknh7w
留言
張貼留言