Angular2：你如何正确地绑定到嵌套数据？

Question

我有一个组件，我将用它作为加载到多选题的外壳。下面是如何将组件成立至今

组件

import { Component } from '@angular/core'; 

export class Answers{ 
    id: string; 
    answer: string; 
} 

const answers: Answers[] = [ 
     { 
     id: 'exp01q', 
     answer: 'Its fine as is.' 
     }, 
     { 
     id: 'exp02q', 
     answer: 'I want to make minor adjustments.' 
     }, 
     { 
     id: 'exp03q', 
     answer: 'I want to change my image' 
     }, 
     { 
     id: 'exp04q', 
     answer: 'Ive never wanted to use a particular image until now.' 
     } 
    ]; 

@Component({ 
    moduleId: module.id, 
    selector: 'multi-radio-btn', 
    templateUrl: 'multi-rad-btn.component.html', 
    styleUrls: ['multi-rad-btn.component.css'] 
}) 

export class MultiRadioBtnShell { 

    question = 'How do you feel about your current image?'; 
    id = 'exp-img-q'; 
    name = 'exp-ques1'; 
    ans = answers; 

} 

HTML模板

<h3>radio button shell</h3> 

<div class="row justify-content-center"> 
    <fieldset [attr.id]='id' class="card col-8 justify-content-center"> 

     <label class="ques-title"> 
      {{question}} 
     </label> 

     <div class="row answer-row-section justify-content-center"> 

      <div *ngFor="let answers of ans" class="col col-12 answer-row justify-content-center"> 
       <div class="col justify-content-center"> 

        <input type="radio" 
         [attr.id]="answers.id" 
         [attr.name]="name" 
         [attr.value]="answers.answer" hidden /> 

        <label [attr.for]="answers.id" class="col ques-ans-title" style="background-color: #4b73a0;"> 
         {{answers.answer}} 
        </label> 
       </div> 
      </div> 

     </div> 

    </fieldset> 
</div> 

它的成立是现在这个样子的原因是因为这样，我试图在第一次做没有工作，所以我去了英雄之旅教程跟随他们如何加载所有的英雄。问题来自未定义的答案。所以我就像他们做英雄一样操纵那部分，只是为了做一些我能够遵循的事情，以确保我得到了如何加载的机制。

我试图做的是与此

// I had this right above the component 
export class ExpQ{ 
    question: string; 
    id: string; 
    name: string; 
    answers:[ 
     { 
     id: string; 
     answer: string; 
     } 
    ] 
} 

// I had this in the component's class 
export const expq: ExpQ[] = [ 
    { 
    question: 'How do you feel about your current image?', 
    id: 'exp-img-q', 
    name: 'exp-ques1', 
    answers:[ 
     { 
     id: 'exp01q', 
     answer: 'Its fine as is.' 
     }, 
     { 
     id: 'exp02q', 
     answer: 'I want to make minor adjustments.' 
     }, 
     { 
     id: 'exp03q', 
     answer: 'I want to change my image' 
     }, 
     { 
     id: 'exp04q', 
     answer: 'Ive never wanted to use a particular image until now.' 
     } 
     ] 
    } 
] 

我与调用它在HTML中的原始的方式

{{} expq.question}，{{} expq.name }，{{} expq.answers.id}，{{expq.answers.answer}}等

起初只加载它工作得很好的问题，但我到了answers:部分它开始打破。我遇到了这个https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol，看到addresses:部分的语法与我需要构建数据的方式非常相似。所以我把所有的东西重新制作成类似的东西。我仍然没有运气让它工作。

最终，我将通过父组件发送问题@input和@output以及我遇到的其他一些技巧。但在我甚至想到我需要处理如何将数据全部放入一个源中以便正确地读取嵌套的数据位之前，我遇到的所有例子都是简单的单层数据，所以我不确定我需要使用的语法。我该如何做这项工作？

Answer 1

你可以定义你的模型像这样：

export interface Answer { 
    id: string; 
    answer: string; 
} 

export interface Question { 
    id: string; 
    name: string; 
    question: string; 
    answers: Answer[]; 
} 

那么您的组件可能有这样的测试

question1: Question = { 
    id: 'q1', 
    name: 'q1', 
    question: 'Does TypeScript rule?', 
    answers: [ 
    { id: 'a1', answer: 'Yes' }, 
    { id: 'a2', answer: 'Of Course' }, 
    { id: 'a3', answer: 'Duh' } 
    ] 
}; 

当然的名称不必是相同的，但我觉得这让您更好地了解如何为嵌套数据建模。

然后显示它，你需要迭代嵌套结构。查找* ngFor指令。在这种情况下，你需要迭代你的答案。例：

<div *ngFor="let answer of question1.answers"> 
    {{answer.id}} - {{answer.answer}} 
</div> 

Answer 2

需要变平的对象，

PARAMS：

对象：至少n> 0数组off JSON对象（剂量不物质是圆形的） 目标：{}

路径： “”

注：请确保传递的对象数组为n> 0至少

flatten(objects, target, path) { 
let me = this;  
let retArray = []; 
for(let x=0; x < objects.length; x++) { 

    let object = objects[x]; 
    path = path || ''; 
    target={}; 

    target = me.flattenHelper(object, target, path); 

    retArray.push(target); 
} 
return retArray;} 

..

flattenHelper(object, target, path){ 
let me = this; 
Object.keys(object).forEach(function (key) { 
    console.log("key : "+ key + " : object : " + (object[key] && typeof object[key] === 'object') + " path : " + path); 
    if (object[key] && typeof object[key] === 'object') { 
     me.flattenHelper(object[key], target, path + key); 
    } 
    target[path + key] = object[key]; 
    console.log(target); 
}); 
return target;}