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>

現在このように設定されている理由は、最初にやろうとしていた方法が機能しなかったためです。Tour of Heroes チュートリアルに行って、すべてのヒーローをロードする方法をたどりました。問題は、答えが定義されていないことに起因していました。だから私は、物事がどのようにロードされるかのメカニズムを確実に理解するために、私が従うことができる何かをするために、彼らがヒーローと同じようにその部分を装備しました.

私がやろうとした元の方法はこれでした

// 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だけでなく、私が見つけた他のいくつかのトリックも使用します。しかし、それについて考える前に、ネストされたデータのビットを適切に読み取るために、すべてのデータを 1 つのソースに配置する方法を理解する必要があります。私が遭遇するすべての例は、単純な単一層のデータであるため、使用する必要がある構文についてはわかりません。どうすればこれを機能させることができますか？

4

2 に答える 2