Currently, I'm developing an Angular application and encountering an issue where I am unable to access the nested array value 'subOption.name' for the input type radio's value. I'm uncertain if the error lies within the metaData structure or in the input type itself.
Data Structure
options: [
{subQuestionTitle: 'Consult with SIG SMEs', subOption:[
{name:'consult-sig-sme', key: '1', value: 'impact'},
{name:'consult-sig-sme', key: '2', value: 'no-impact'},
{name:'consult-sig-sme', key: '3', value: 'not-reviewed'}
]},
{subQuestionTitle: 'Plan Profile', subOption:[
{name:'plan-profile', key: '1', value: 'impact'},
{name:'plan-profile', key: '2', value: 'no-impact'},
{name:'plan-profile', key: '3', value: 'not-reviewed'}
]},
{subQuestionTitle: 'Offshore or US?', subOption:[
{name:'offshore', key: '1', value: 'impact'},
{name:'offshore', key: '2', value: 'no-impact'},
{name:'offshore', key: '3', value: 'not-reviewed'}
]},
{subQuestionTitle: 'Impacts & Awareness for IPMs & DCCs?', subOption:[
{name:'impacts-and-awareness', key: '1', value: 'impact'},
{name:'impacts-and-awareness', key: '2', value: 'no-impact'},
{name:'impacts-and-awareness', key: '3', value: 'not-reviewed'}
]}
],
Template Implementation
<div class="grid-row" *ngFor="let opt of question.options">
<input type="radio" value="impact" [name]="opt.subOption.name">
<input type="radio" value="no-impact" [name]="opt.subOption.name">
<input type="radio" value="not-reviewed" [name]="opt.subOption.name">
</div>
Error Message
ERROR TypeError: Cannot read property 'subOption' of undefined
Upon modifying the code as follows:
<input type="radio" value="impact" [name]="opt.subOption">
The resulting implementation revealed in the source F12 is:
<input _ngcontent-c0="" type="radio" value="impact" name="[object Object],[object Object],[object Object]">