分类导航

Angularjs 发布时间：2022-04-20 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Angular 2 – 具有动态对象/属性的ngModel，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

在我的TS文件中,我在我的SELEctedValsObj对象上动态创建属性,如下所示：

private SELEctValsObj: any = {};

setSELEctedValsObj(sectionsArr) {
  sectionsArr.forEach(section => {
    section.questions.forEach(questionObj => {
      if (questionObj.type === 'drop-down') {
        this.SELEctValsObj[questionObj.questionId] = { SELEcted: questionObj.@R_397_5696@etails[0] };
      }
    })
  });
}

在我的HTML中,我想将输入中的[ngModel]绑定到SELEctValsObj对象上的属性.我试过这个,但没有运气：

<div *ngFor="let question of section.questions">
    <div class="drop-down-question" *ngIf="question?.type === 'drop-down'">
        <SELEct class="q-SELEct"
                [(ngModel)]="SELEctValsObj[questionId].SELEcted" // <== doesnt work either**
                // [(ngModel)]="SELEctValsObj[{{ questionId }}].SELEcted" // <== doesnt work**
                name="answerForQuestion{{ question?.questionId }}">
            <option *ngFor="let answer of question?.@R_397_5696@etails"
                [ngValue]="answer">
                    {{ answer?.value }}
            </option>
        </SELEct>
    </div>
</div>

如何将HTML中的ngModel设置为TS文件中动态创建的属性？

解决方法

我试图复制情况,但在代码中,你发布的似乎是多个问题.

> property SELEctValsObj声明为private,但您尝试在模板中使用它
>在模板中,您试图迭代section.questions但我没有看到它在其他地方定义,而是在每个局部范围的setSELEctedValsObj方法中定义
>由于缺少类型定义,您可能错误地使用了数据

这是我理解的代码并添加了typedef

interface QuestionModel {
  type: String;
  questionId: String;
  @R_397_5696@etails: String[];
}

const mock_DATA = [
  {
    questions: [{
      type: 'drop-down',questionId: '42',@R_397_5696@etails: ['wololo'],}],},];


@Component(...)
export class ProductsComponent {
  SELEctValsObj: { [key: String]: { SELEcted: String } } = {};

  constructor() {
    this.setSELEctedValsObj(mock_DATA);
  }

  setSELEctedValsObj(sectionsArr: { questions: QuestionModel[] }[]) {
    sectionsArr.forEach(section => {
      section.questions.forEach(questionObj => {
        if (questionObj.type === 'drop-down') {
          this.SELEctValsObj[questionObj.questionId] = {SELEcted: questionObj.@R_397_5696@etails[0]};
        }
      });
    });
  }
}