如何基于ID使用* ngFor分配值以选择选项

时间:2018-11-16 15:44:02

标签: angular angular6

我一直在使用Angularjs的项目中工作,现在将相同的代码转换为angular 6。

我陷入了根据问题ID分配值来选择选项的问题。

我在Angularjs中使用的代码:

HTML

 <tr ng-repeat="question in questionnaireDataObject[categoryUnique.id] track by $index">
<td><span class="" title="{{question.QuestionItem}}">{{question.QuestionItem}}</span></td>
  <td>
    <div class="" >

      <select id="{{question.QuestionId}}" ng-model="question.MasterData" ng-change="getSelectedAnsVal(question);" class="form-control" style="white-space:pre-wrap;">
         <option selected="selected"></option>
         <option ng-repeat="answer in answerData[question.MasterDataCategoryId]" value="{{answer.MasterData}}">{{answer.MasterData}}</option>                                                       
      </select>



      </div>

   </td>

JS

$scope.getAnswersDetails = function(questionId){

   questBasedEditService.getAnswerDetails(questionId)
    .then(function (data, status, headers, config) {

     $scope.answerData[questionId] = data.data.selectResults;

   }, function (error) {

   });

  }

上面的代码工作正常,我得到所需的输出。 Working screenshot

我有一套手风琴,对于每个问题我们都有一套问题,我有与特定问题相关的不同答案,这些问题是我通过设置问题ID在angularjs中实现的。答案API的调用将与我们拥有的问题数量一样多。请参考以下

我无法在角度6中执行相同的操作。

角度6代码:

HTML:

<tr *ngFor="let question of questionnaireDataObject;" >
  <td><span class="" title="{{question.QuestionItem}}">{{question.QuestionItem}}</span></td>
  <td class="selectstyle select-text-align">
     <select *ngIf="question.MasterDataCategoryId != 0" id="{{question.QuestionId}}" [(ngModel)]="question.MasterData" (change)="getSelectedAnsVal(question);" style="white-space:pre-wrap;">
        <option selected="selected"></option>
        <option *ngFor="let answer of answerData" value="{{answer.MasterData}}">{{answer.MasterData}}</option>   
     </select>

JS

1)我们有2个API调用。一种是调用问题数据,另一种是调用答案数据。

2)如果手风琴中有5个问题,我将分别使用 questionID 调用Answer API 5次。

 getAnswersDetails(questionId): void {

   this.records = this.QuestionnaireAdd.getAnswerDetails(questionId).subscribe((data: any) => {
   this.answerData = data.selectResults;

    },
    error => { 

    },
    () => {

    })

  }

有人可以建议我如何解决此问题。

0 个答案:

没有答案