attr.data 在 angular 5 上返回 null

Question

我一直在尝试获取所选单选按钮的 id 值，为此我使用了 attr.data-formr，但是在通过函数 confirmed1()，它 returns 值 NULL。我想要实现的是获取输入标签中定义的 attr.data-formr 的值。可能有什么问题？

HTML代码：

<form [formGroup]="posTrial" #q1> 
   <label class="labl">
    <input type="radio" 
     [attr.data-formr]=1 
     class="form-control" 
     formControlName="pos1"  
     value={{quizData[0].option1}}>
    <div class="option">{{quizData[0].option1}}</div>
   </label>
  <label class="labl">
    <input type="radio" 
      [attr.data-formr]=2  
      class="form-control"  
      formControlName="pos1"  
      value={{quizData[0].option2}}>
    <div class="option">{{quizData[0].option2}}</div>
  </label>
  <label class="labl">
    <input type="radio" 
      [attr.data-formr]=3 
       class="form-control" 
       formControlName="pos1"  
       value={{quizData[0].option3}}>
     <div class="option">{{quizData[0].option3}}</div>
   </label>
    <label class="labl">
      <input type="radio" 
        [attr.data-formr]=4 
        class="form-control" 
        formControlName="pos1"  
        value={{quizData[0].option4}}>
      <div class="option">{{quizData[0].option4}}</div>
    </label>
    <div *ngIf="toggle1!=1 ; then template1; else template2" style="display:inline"></div>
    <ng-template #template1>
        <button mat-raised-button color="primary" style="width:100%;"  (click)="confirmed1(this.posTrial.value.pos1,q1.getAttribute('data-formr'))" [disabled]="!posTrial.dirty" class="footer">Confirm</button>
    </ng-template>
    <ng-template #template2>
        <button mat-raised-button color="primary" style="width:100%;" class="footer1" (click)="selectNext(matgroup)" >Next</button>
        <button mat-raised-button color="primary" style="width:100%;"  class="footer2" (click)="openDialog(quizData[0].info)" >Show Details</button>
    </ng-template>
 </form>

Angular代码：

confirmed1(ans:any,id:any)
      {
        console.log(ans);
        if(ans==this.ansData[1].answer)
        {
          console.log("tango successful");
          this.toggle1Cor=1;
          console.log(id);

        }
        else{
          console.log("Charlie SOS");
          this.toggle1Cor=2;
          console.log(id);

        }
        this.toggle1=1;
        this.posTrial.get('pos1').disable()
        this.dis=1;
        console.log(id);   
  }

控制台结果

option11              page-questions.component.ts:178 
Charlie SOS           page-questions.component.ts:180 
null                  page-questions.component.ts:186

Answer 1

我找到了解决方案。我不是从属性中收集数据。相反，我这样做的方法是完全错误的。我不得不使用 getAttributes() 来获取属性的具体值

attr.data 在 angular 5 上返回 null

attr.data returning null on angular 5

angular

radio-button

getelementbyid

attr