使用材质设计时无法按任何垫子单选按钮

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

U有一个选项吗？如果是，则必须使用复选框项。