1

我有一个组件，我将用作加载多项选择题的外壳。到目前为止，组件的设置方式如下

零件

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我遇到的其他一些技巧。但在我考虑之前，我需要掌握如何将数据全部放入一个源中，以便正确读取嵌套的数据位。我遇到的所有示例都是简单的单层数据，所以我不确定我需要使用的语法。我怎样才能使这项工作？

4

2 回答 2

3

您可以像这样定义模型：

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>
于 2017-01-14T03:09:33.583 回答
0

需要压扁物体，

参数：

对象：至少 n>0 数组关闭 JSON 对象（不管是循环的）目标：{}

小路 ： ””

注意：确保传入的 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;}
于 2017-03-30T10:09:04.640 回答