Question

几年前我用JQuery和静态表单元素完成了这个，但现在我正在使用Angular2和Typescript 2，并且必须考虑这样一个事实：它不会总是使用相同的数据和值来填充组件我无法解决这个问题所需的“抽象性”程度。

到目前为止，这就是一切设置的方式。

来自Firebase的数据

{
    "page_area_business_image"      : {
        "expand"    : {
            "intro" : "some info...",

            "title" : "a title"
        },
        "rebrand"   : {....},
        "newbrand"  : {....},
        "questions" : {
            "question01"    : {
                "id"        : "an ID",
                "name"      : "a name",
                "question"  : "a question",
                "answers"   : [
                    "answer01"  : {
                        "answer"    : "some answer",
                        "id"        : "an ID"
                    },
                    "answer02"  : {
                        "answer"    : "another answer",
                        "id"        : "an ID"
                    },
                    "answer02"  : {
                        "answer"    : "another answer",
                        "id"        : "another ID"
                    }
                ]
            },
            "question02"    : {....},
            "question03"    : {....}
        }
    }
}

我将这些数据传递给子组件，子组件有自己的子组件，这是我为问题做出的“多选”组件。该模板会像这样绑定传入的问题

<fieldset [attr.id]="question?.id" class="card col-8 justify-content-center">

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

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

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

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

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

    </div>

</fieldset>

这是我的组件类到目前为止的样子

export class MultipleChoiceRadioComponent implements OnInit, OnChanges {

    @Input('question')
    featureQuestion: any;

    @Output()
    answerO: string;
    // Will be used to send the result back up to parent where if statements will trigger other elements



    ngOnChanges(){

        // I plan to put whatever I come up with here so the value can update if it changes.
        //console.log(this.answerO);
    }

    ngOnInit() {

    }
}

我遇到过这个 How to set radio button checked in Angular 2 但它或多或少地触发了一个真假结果，我打算在父组件中做，multiple choice组件不能那么具体，所以我无法找到一种方法将其翻译成我需要什么。

我遇到过这个 Radio buttons in Angular2 Model Driven forms not working as expected 这让我想到了这个 https://angular.io/docs/ts/latest/cookbook/dynamic-form.html# 虽然在其他方面非常丰富且有用，但它没有提到单选按钮。我猜你会以同样的方式将它们全部链接起来，但我也猜测在处理单选按钮和将id作为所选结果时，会有一些独特的转折。

这似乎与我需要做的最接近 http://www.talkingdotnet.com/bind-radiobutton-list-in-angular-2/。唯一的事情就是弄清楚我需要做什么来设置我的数据以便创建合适的类，加上我已经将数据加载到组件中，所以这意味着我必须打破我做的事情并以另一种方式发送，我认为有点多，如果它已经存在，它必须以某种方式我可以简单地收集和更新结果，而不必改变一切。

我发现的大部分内容都是针对Angular 1.5的内容或Angular 2的alpha版本，后者用于创建控制器和过滤器并使用#代替let以及各种好东西弃用或扁平化不适用于Angular 2.我已经看过几个刚刚使用普通ol document.getElementById()但是有了动态性的东西，我不能这样做。或者我可以吗？请帮忙。

Answer 1

快速危险：

我相信你想要做的是使用radio-group指令，可能在你的ngFor之上或之上，如下所示：

<div radio-group [(ngModel)]="selectedAnswer" *ngFor="let answer of featureQuestion?.answers" class="col col-12 answer-row justify-content-center">

注意：您甚至可能希望将这些更改放在一个封闭的div中。注意：NgModel绑定到一个新变量。这将保留您在

中设置的值

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

我希望这会有所帮助

另外，我刚刚意识到，你可能想要许多放射性组件？在这种情况下，而是将ngModel绑定到值数组

如何从选定的单选按钮中提取id和值以传递到@Output？

1 个答案: