英文:
How to get radio id or name on button click (located in isolated div)
问题
以下是您的翻译部分：
我正在使用Angular 13，以下是HTML代码。有两个单选按钮组，teamStrength和companyStrength。我想在按钮单击时获取所选单选按钮的ID或名称，以供loadDataForNextTab()方法使用。<div class="section team_strength"><h3 class="team-heading">Team Strength:</h3><div class="team-wrapper"><!-- 这里是一组单选按钮 --></div></div><div class="section company_strength"><h3 class="company-heading">Company Strength:</h3><div class="company-wrapper"><!-- 这里是另一组单选按钮 --></div></div><div class="section bottom"><div class="button-wrapper"><button class="btn btn-danger butn butn-next" (click)="loadDataForNextTab()">Next</button><button class="btn butn butn-skip">Skip for now</button></div></div>目前，我正在使用以下TypeScript代码来获取ID。const dom: HTMLElement = this.elementRef.nativeElement;const teamStrengthelements = dom.querySelectorAll('.teamsStrength');const companyStrengthelements = dom.querySelectorAll('.companyStrength');let teamElementIdHolder: String = '';let companyElementIdHolder: String = '';teamStrengthelements.forEach((element: any) => { if (element.checked) { teamElementIdHolder = element.id } });companyStrengthelements.forEach((element: any) => { if (element.checked) { companyElementIdHolder = element.id } });这种方法是否合适？还有更好的处理方法吗？请帮忙提供建议。
请注意，我已经省略了不需要翻译的代码部分。如果您需要更多帮助或有其他问题，请随时提出。
英文:
I am using Angular 13 and below is the html code. There are two radio groups teamStrength and companyStrength. I want to get id or name of selected radio on button click for the method loadDataForNextTab().
<div class="section team_strength"><h3 class="team-heading">Team Strength:</h3><div class="team-wrapper"><div class="input-wrapper"><input type="radio" name="team-strength" id="team-me" class="teamsStrength"><label for="team-me">Just Me</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-one_five" class="teamsStrength"><label for="team-one_five">1 - 5</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-five_thirty" class="teamsStrength" checked><label for="team-five_thirty">5 - 30</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-thirty_fifty" class="teamsStrength"><label for="team-thirty_fifty">30 - 50</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-fifty_hundread" class="teamsStrength"><label for="team-fifty_hundread">50 - 100</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-hundread_twoHundread" class="teamsStrength"><label for="team-hundread_twoHundread">100 - 200</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-twoHundred_fiveHundred" class="teamsStrength"><label for="team-twoHundred_fiveHundred">200 - 500</label></div><div class="input-wrapper"><input type="radio" name="team-strength" id="team-fiveHundredPlus" class="teamsStrength"><label for="team-fiveHundredPlus">500+</label></div></div></div><div class="section company_strength"><h3 class="company-heading">Company Strength:</h3><div class="company-wrapper"><div class="input-wrapper"><input type="radio" name="company-strength" id="company-one_five" class="companyStrength"><label for="company-one_five">1 - 5</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-five_thirty" class="companyStrength"><label for="company-five_thirty">5 - 30</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-thirty_fifty" class="companyStrength"><label for="company-thirty_fifty">30 - 50</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-fifty_hundread" class="companyStrength"><label for="company-fifty_hundread">50 - 100</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-hundread_twoHundread" class="companyStrength"><label for="company-hundread_twoHundread">100 - 200</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-twoHundred_fiveHundred" class="companyStrength"><label for="company-twoHundred_fiveHundred">200 - 500</label></div><div class="input-wrapper"><input type="radio" name="company-strength" id="company-fiveHundredPlus" class="companyStrength"><label for="company-fiveHundredPlus">500+</label></div></div></div><div class="section bottom"><div class="button-wrapper"><button class="btn btn-danger butn butn-next" (click)="loadDataForNextTab()">Next</button><button class="btn butn butn-skip">Skip for now</button></div></div>
Currently, I am using below ts code to get id.
const dom: HTMLElement = this.elementRef.nativeElement;const teamStrengthelements = dom.querySelectorAll('.teamsStrength');const companyStrengthelements = dom.querySelectorAll('.companyStrength');let teamElementIdHolder: String = '';let companyElementIdHolder: String = '';teamStrengthelements.forEach((element: any) => { if (element.checked) { teamElementIdHolder = element.id } });companyStrengthelements.forEach((element: any) => { if (element.checked) { companyElementIdHolder = element.id } });
Is the approach good? Or is there any better way to deal with this? Please help.
答案1
得分: 1
以下是您要翻译的内容：
"There is nothing wrong with the approach but there is definitely a better way to achieve the same.
I would highly recommend looking at Angular Material library. It will help you a lot with UI creation as there are ready to use components.
In your html file:
<mat-radio-group
aria-label="Select an option"
(change)="selectionChange($event)">
In your ts file:
selectionChange(data: MatRadioChange) {
console.log(data.value);
}
Also would recommend to create an array of your data object and have *ngFor generate the html for you. It will make your code concise and readable.
In your html file:
<mat-radio-group
aria-labelledby="example-radio-group-label"
[(ngModel)]="favoriteSeason">
<mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
{{season}}
In your ts file:
@Component({
selector: 'radio-ng-model-example',
templateUrl: 'radio-ng-model-example.html',
styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
favoriteSeason: string;
seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}
Hope this helps.
英文:
There is nothing wrong with the approach but there is definitely a better way to achieve the same.
I would highly recommend looking at Angular Material library. It will help you a lot with UI creation as there are ready to use components.
In your html file:
<mat-radio-grouparia-label="Select an option"(change)="selectionChange($event)"><mat-radio-button value="One">Option 1</mat-radio-button><mat-radio-button value="Two">Option 2</mat-radio-button></mat-radio-group>
In your ts file:
selectionChange(data: MatRadioChange) {console.log(data.value);}
Also would recommend to create an array of your data object and have *ngFor generate the html for you. It will make your code concise and readable.
In your html file:
<mat-radio-grouparia-labelledby="example-radio-group-label"[(ngModel)]="favoriteSeason"><mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">{{season}}</mat-radio-button></mat-radio-group>
In your ts file:
@Component({selector: 'radio-ng-model-example',templateUrl: 'radio-ng-model-example.html',styleUrls: ['radio-ng-model-example.css'],})export class RadioNgModelExample {favoriteSeason: string;seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];}
Hope this helps.
答案2
得分: 0
你可以使用类似以下的代码，并根据需要修改选择器，如果有其他的单选框输入项。
[...this.elementRef.nativeElement.querySelectorAll('input[type=radio]:checked')].map(el => el.id)
这些ID是从返回的 NodeList 中提取的，可以相应地使用。
英文:
you can use something like below and modify the selector if there are other radio inputs.
[...this.elementRef.nativeElement.querySelectorAll('input[type=radio]:checked')].map(el => el.id)
This ids are extracted from the returned NodeList and can be used accordingly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论