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;}