Angular 2 – 具有动态对象/属性的ngModel

发布时间：2020-12-17 17:27:31 所属栏目：安全来源：网络整理

导读：在我的TS文件中,我在我的selectedValsObj对象上动态创建属性,如下所示： private selectValsObj: any = {};setSelectedValsObj(sectionsArr) { sectionsArr.forEach(section = { section.questions.forEach(questionObj = { if (questionObj.type === 'drop-

在我的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>

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

解决方法

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

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

这是我理解的代码并添加了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]};
        }
      });
    });
  }
}

在检查类型定义是否与您最初预期的一样(并正确使用它)之后,您将防止出现大量错误.

此外,请考虑使用更多声明性方法,映射和过滤数据,而不是在方法中使用forEach.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!