垫子单选按钮上的 aria 标签被切断

Question

在我的 Angular 项目中，我有这段代码（简化）：

        <mat-radio-group
          aria-labelledby="readingListGroupLabel"
          [(ngModel)]="selectedExportTo"
          name="exportTo">
          <mat-radio-button
            aria-label='choose to export to reading list collection'
            *ngFor="let option of exportToOptions"
            [value]="option">
            {{option}}
          </mat-radio-button>
        </mat-radio-group>

但由于某种原因，mat-radio-button“选择导出到阅读列表集合”的咏叹调标签被缩短为 30 个字符 - 在浏览器中我看到：

ng-reflect-aria-label="Choose to export to reading li"

这是为什么？

Answer 1

啊！这是一个奇怪的问题，但这是解决方法，我知道这不是最好的解决方案，但是是的，你可以解决这个问题

<mat-radio-group
 aria-labelledby="readingListGroupLabel"
 [(ngModel)]="selectedExportTo" 
  name="exportTo">
  <mat-radio-button
  *ngFor="let option of exportToOptions"
  [value]="option">
   {{option}}
 </mat-radio-button>
</mat-radio-group>

fullLabel = 'choose to export to reading list collection'

constructor(private renderer: Renderer2)

@ViewChildren(MatRadioButton) radioButtons: QueryList<MatRadioButton>

ngAfterViewInit(){
 const radioButtonComponent = this.radioButton.first
 const radioButtonElement = radioButtonComponent._elementRef.nativeElement

 this.renderer.setAttribute(radioButtonElement, 'aria-label', this.fullLabel)
}

堆栈闪电战