6

在我的 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.answerDetails[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?.answerDetails"
                [ngValue]="answer">
                    {{ answer?.value }}
            </option>
        </select>
    </div>
</div>

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

4

4 回答 4

5

我试图复制这种情况，但在代码中，您发布的似乎是多个问题。

  1. 属性selectValsObj被声明为，private但您试图在模板中使用它
  2. 在您尝试迭代的模板中，section.questions但我没有看到它在其他任何地方定义，而是在setSelectedValsObjforEach 本地范围的方法中
  3. 由于缺少类型定义，您可能会错误地使用数据

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

interface QuestionModel {
  type: string;
  questionId: string;
  answerDetails: string[];
}

const MOCK_DATA = [
  {
    questions: [{
      type: 'drop-down',
      questionId: '42',
      answerDetails: ['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.answerDetails[0]};
        }
      });
    });
  }
}

在您检查类型定义是否符合您最初的预期（并正确使用它）之后，您将防止很多错误。

此外，请考虑使用更具声明性的方法，map以及filter您的数据而不是forEach在方法中使用。

于 2018-03-25T17:20:04.097 回答
1 
(click)="toggle(address.id)"
  *ngIf="action[address.id]"

在 ts 文件中：

action: any = {};

在切换方法中，

this.action[addressId] = !this.action[addressId];
于 2018-09-24T05:41:08.407 回答
1

对于 HTML 代码中的以下行：

[(ngModel)]="selectValsObj[questionId].selected"

如果您没有将 ts 文件定义questionId为在 ts 文件中任何位置都有值的变量，那么这可能是问题所在。

如果您想获取您正在循环的列表中questionId的每个question，section.questions您可以尝试按如下方式进行：

[(ngModel)]="selectValsObj[question.questionId].selected"

我做了一个简单的例子，你可以在这里（在 中src/app.ts）找到不同的工作案例。我希望它可以帮助。

于 2018-03-30T14:51:16.593 回答
0
  • 目前还不是很清楚您要达到的目标。
  • 我假设您正在尝试在组合框中动态构建一个包含问题和答案的页面，如果它是“下拉”类型的话。
  • 您还试图捕获选定的答案。

如果是这样...下面的代码片段可以提供帮助。

import { Component, OnInit } from '@angular/core';

interface Question {
  questionStr: string;
  questionId: string;
  type: string;
  answers: Array<string>;
  selectedAnswer: string;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';

  selectValsArr: Array<Question> = [];

  ngOnInit() {
    this.setSelectedValsObj([
      {
         questionStr : 'Question1',
         questionId: 'Q01',
         type: 'drop-down',
         answers: ['Q1Ans1', 'Q1Ans2', 'Q1Ans3'],
         selectedAnswer: null
      },
      {
        questionStr: 'Question2',
        questionId: 'Q02',
        type: 'drop-down',
        answers: ['Q2Ans1', 'Q2Ans2', 'Q2Ans3'],
        selectedAnswer: null
      },
    ]);
  }


  setSelectedValsObj(sectionsArr: Array<Question>) {
    sectionsArr.forEach(section => {
      if (section.type === 'drop-down') {
        this.selectValsArr.push(section);
        }
    });
  }
}

和HTML

<div *ngFor="let question of selectValsArr">
  <h3>{{question.questionStr}}</h3>
  <div class="drop-down-question">
    <select [(ngModel)]="question.selectedAnswer">
      <option value="">Select an Answer</option>
      <option *ngFor="let ans of question.answers" [ngValue]="ans"> {{ans}}</option>
    </select>
  </div>
</div>

<br>
<h2>Selected Answer</h2>

<div *ngFor="let question of selectValsArr">
    <span>{{question.questionStr}}</span>
    <span>&nbsp; &nbsp; - &nbsp; {{question.selectedAnswer}}</span>
</div>
于 2018-03-30T13:57:15.200 回答