使用 Material Design 时无法按下任何垫子单选按钮

Question

我目前遇到的问题是无法选择我拥有的组中的任何单选按钮。对于更多背景知识，我正在使用 Material Design 6.4.7、Angular 6 和 Cordova 来构建一个适用于 android 的混合应用程序。出于某种原因，当我运行应用程序并尝试按下其中一个选项时，没有任何反应。这是一个相对较新的问题，因为它曾经可以工作，但现在突然之间它似乎已经完全崩溃了。

这是我的广播组 html：

<mat-radio-group class="radio-group" [(ngModel)]="selectedVehicle">
    <mat-radio-button class="radio-button" style="font-size: larger; display: inline-block;  margin-right: 3%;" name="barcodeType" *ngFor="let vehicle of vehicleList" [value]="vehicle">{{vehicle}}</mat-radio-button>
<mat-radio-group>

<br><br>

<mat-radio-group class="radio-group" [(ngModel)]="printCount">
    <mat-radio-button class="radio-button" style="font-size: larger; display: inline-block;  margin-right: 14.5%;" name="printCount" *ngFor="let copy of possiableCopies" [value]="copy">{{copy}}
</mat-radio-button>

我的组件文件中有所有必需的变量/数组，正如我之前所说，它曾经可以工作，所以我认为这没有什么问题，这就是我来这里的原因，因为我在可能出错的损失。如果这有点含糊，我很抱歉，如果还有任何人需要的信息，我可以发布它，但是我什至不知道从哪里开始，因为我什至无法在网上找到一个与我的设置相似的实例。谢谢。

**编辑 1： 这是组件的 TS 文件。我删除了一些与此无关的函数和数据字符串，我真的不想在网上发布，但没关系。老实说，如果我现在不得不猜测，我觉得我使用 ngZone 的方式可能会发生一些事情。我在其中调用函数的方式是我发现的一种解决方法，但我真的不太了解它，或者它是否有负面影响，因为我正处于紧缩状态并且必须让它工作。

import { Component, OnInit, NgZone } from '@angular/core';
import { Router } from '@angular/router'
import { DialogService } from "./../dialog-service.service"
import { PrinterData } from '../printer-data';
import { StockTypeDialogComponent } from '../stock-type-dialog/stock-type-dialog.component';
import { BarcodePreviewDialogComponent } from '../barcode-preview-dialog/barcode-preview-dialog.component'
import { MatDialog, MatDialogRef } from '@angular/material';

export interface StockDialogData {
  stockType: number;
}

@Component({
  selector: 'app-barcode-printing-view',
  templateUrl: './barcode-printing-view.component.html',
  styleUrls: ['./barcode-printing-view.component.scss']
})
export class BarcodePrintingViewComponent implements OnInit {

  stockDialogRef: MatDialogRef<StockTypeDialogComponent>;
  previewDialogRef: MatDialogRef<BarcodePreviewDialogComponent>;

  _printer: PrinterData;

  barcode: string;
  bcCharacter: string = 'T';
  dataToPrint:string = '';
  stockType: number = 0;

  printCount: number = 1;
  selectedVehicle: string = "T";
  vehicleList: string[] = ['Trailer', 'Dolly', 'Van', 'Door'];
  /*radioData: object[] = [
    {"type":"Trailer", "bcLetter":"T", "checked":true, "count":1},
    {"type":"Dolly", "bcLetter":"D", "checked":false, "count":2},
    {"type":"Van", "bcLetter":"V", "checked":false, "count":3},
    {"type":"Door", "bcLetter":"Y", "checked":false, "count":4}
  ]*/
  possiableCopies: number[] = [1, 2, 3, 4];

  testPrint = "";

  printAlignString = []; 
  // 0: Black Thermal Stock (TESTED), 1: White Linered Stock (TESTED), 2: White Linerless Stock (SHOULD WORK BUT NOT TESTED)

  constructor(public stockDialog: MatDialog, public previewDialog: MatDialog, private router: Router, private service: DialogService, private zone: NgZone) { }

  ngOnInit() {
    this._printer = this.service.getPrinter();
    this.barcode = this.service.getBarcode();
    this.bcCharacter = this.barcode[0];
    //this.setStockType(1);
    console.log();
  }

  initialPrint() {
    this.zone.run(() => {
      //this.setStockType(this.stockType);
      this.dataToPrint = this.labelFormatter(0);
      for(var i = 0; i < this.printCount; ++i) this.print();
      //if(this.stockType != 2) this.setStockType(2);
    });
  }

  openPreviewDialog() {

    this.zone.run(() => {
      this.previewDialogRef = this.previewDialog.open(BarcodePreviewDialogComponent, {
        disableClose: false,
        hasBackdrop: true
      });

      this.previewDialogRef.afterClosed().subscribe(result => {
        console.log('Barcode preview dialog closed - selected: ' + result);
        if(result) this.initialPrint();
      });
    });
  }

  openStockDialog() {
    this.zone.run(() => {
      this.stockDialogRef = this.stockDialog.open(StockTypeDialogComponent, {
        disableClose: false,
        hasBackdrop: true
      });

      this.stockDialogRef.afterClosed().subscribe(result => {
        console.log('Stock selection dialog closed - selected: ' + result);
        this.stockType = result;
        //this.setStockType(this.stockType);                                                                      **FIX ME
      });
    });
  }

  setStockType(x: number) {
    this._printer.service.print(this.printAlignString[x], this._printer.printer)
    .then((response) => {
        console.log('Stock type set');
    })
    .catch((reason) =>{
        console.log(reason);
    })
  }

  private print(){
    this._printer.service.print(this.testPrint, this._printer.printer)
    .then((response) => {
        console.log(response);
    })
    .catch((reason) =>{
        console.log(reason);
    })
  }

  cancel() {
    this.zone.run(() => {
      this.router.navigate(['/scanHome']);
    });
  }
}

Answer 1

你有一个选择吗？如果是，您必须使用复选框项目。