attr.data 在 angular 5 上返回 null
attr.data returning null on angular 5
我一直在尝试获取所选单选按钮的 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
我找到了解决方案。我不是从属性中收集数据。相反,我这样做的方法是完全错误的。我不得不使用 getAttributes()
来获取属性的具体值
我一直在尝试获取所选单选按钮的 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
我找到了解决方案。我不是从属性中收集数据。相反,我这样做的方法是完全错误的。我不得不使用 getAttributes()
来获取属性的具体值