将子嵌套的JSON字符串分配给HTML输入类型无线电的值

Question

我正在开发Angular应用程序，我需要读取嵌套数组值＆＃39; subOption.name＆＃39;对于输入类型的无线电的值，但我收到错误，我不确定错误是元数据结构还是输入类型？

元数据

self.model

模板

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'}
              ]}
    ],

错误

<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 TypeError: Cannot read property 'subOption' of undefined

Answer 1

你可以试试这个

<div class="grid-row" *ngFor="let opt of options">
  {{opt.subQuestionTitle}} <br/>
  <span *ngFor="let suboption of opt.subOption">
    <input type="radio"[value]="suboption.value" [name]="suboption.name"/>
    {{suboption.value}}
  </span>
</div>

这样做的最佳方式是创建更小的组件，例如<span>...</span>中的整个内容可以是SubOptionsComponent，每个input radio，然后值可以是SubOptionComponent