Question

我有一个组件，我将用作加载多项选择问题的shell。到目前为止，如何设置组件

成分</ P>

predict()

HTML模板

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;

}

现在这样设置的原因是因为我最初尝试这样做的方式不起作用所以我去了英雄之旅教程，跟随他们如何加载所有英雄们。问题来自答案没有定义。因此，为了做一些我能够遵循的事情，我只是为了确保获得事物负荷的机制，我就像对待英雄一样操纵那部分。

我尝试这样做的原始方式是使用此

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

我在html中用

调用它

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

首先只是加载问题它工作得很好，但是当我到达// 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.' } ] } ]部分时它就开始破坏了。我遇到了这个https://scotch.io/tutorials/using-angular-2s-model-driven-forms-with-formgroup-and-formcontrol，看到answers:部分的语法与我需要构建数据的方式非常相似。所以我重新制作了类似的东西。我仍然没有运气去工作。

最终，我将使用addresses:和@input通过父组件发送问题，以及我遇到的其他一些技巧。但在我考虑之前，我需要了解如何将数据全部放入一个源中，以便正确读取嵌套的数据位。我遇到的所有示例都是简单的单层数据，因此我不确定我需要使用的语法。我怎样才能做到这一点？

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

需要展平对象，

参数：

对象：关闭JSON对象的至少n> 0个数组（剂量无关紧要是圆形的）目标：{}

路径：＆＃34;＆＃34;

注意：确保传入的Objects Array至少为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;}

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

2 个答案: