带有打印操作的 Angular TypeError答案

【问题标题】：Angular TypeError with print operation带有打印操作的 Angular TypeError
【发布时间】：2021-09-05 19:13:35
【问题描述】：

我编写了一个代码，用户可以从下拉框中选择打印机类型，然后通过单击按钮使用选定的打印机打印内容。每当我单击打印按钮时，它都会给出一个typeerror，如下所示。我搜索了问题并对其进行了初始化，但它不起作用。我应该怎么做才能修复这个错误？

HTML：

<mat-form-field appearance="outline" fxFlex="100" fxFlex.gt-xs="50" class="w-100-p py-8">
    <mat-label>Printer Name</mat-label>
    <mat-select [(ngModel)]="selectedPrinter" name="selectedPrinter" [compareWith]="comparePrinter" >
        <mat-option *ngFor="let prm of printerList" [value]="prm">
            {{prm.Name}}
        </mat-option>
    </mat-select>
</mat-form-field>
<button mat-button matRipple class="purple-500 fuse-white-fg mr-12" (click)="printSticker()"> Print Sticker </button>

TS：

public _stickerData: IStickerData = {};
    selectedPrinter: IPrinter = {};
        printerList: IPrinter[];
    selection = new SelectionModel<IStickerData>(true, []);
        printSticker() {
            this.confirmDialogRef = this._dialog.open(FuseConfirmDialogComponent, {
                disableClose: false
            });
    
            this.confirmDialogRef.componentInstance.confirmMessage = 'Do you want to print the sticker?';
    
            this.confirmDialogRef.afterClosed().subscribe(result => {
                if (result) {
                    this.selection.selected[0].SelectedPrinter = this.selectedPrinter;
                    this._productionService.printStickerData(this._stickerData).subscribe((response: IStickerData) => {
                        this._stickerData = response;
                        this._messages.Show("Printed", "SUCCESS", 3);
                    });
                }
            });
        }

【问题讨论】：

标签： javascript html angular typescript typeerror

【解决方案1】：

您的this.selection.selected[0].SelectedPrinter 为空，您需要使用至少一个对象对其进行初始化，以便访问数组元素及其属性。

selection = new SelectionModel<IStickerData>(true, []);

上面的语句创建了一个IStickerData类型的空数组，但它是空的。

可能你需要这样的东西：

this.selection.push =new StickerData(this.selectedPrinter);

其中StickerData 应该是一个实现IStickerData 的类，并且必须有构造函数来传递该字符串并返回IStickerData 对象的类型。

例如：

interface IStickerData{
   SelectedPrinter: string
}

class StickerData implements IStickerData{
   SelectedPrinter = '';
   constructor(item: string){
     this.SelectedPrinter = item;
   }
}

【讨论】：