为什么我的 HTML 中出现 Unresolved 变量或类型approvedPriceDealerCostForm？

Question

我正在使用 angular 8 并且我想在单击按钮时发送approvedPriceDealerCostForm 但我得到approvedPriceDealerCostForm Unresolved 变量或类型approvedPriceDealerCostForm 错误。 请参阅附图以获取更多信息。 我想将我的按钮保留在 mat-dialog-actions 中。

 <ng-dave2-task-instance-progress [firstLayerClasses]="'invisible'" > <ng-container *ngIf="(deal$ | async) as deal"> <mat-dialog-content style="height: 85%" class=""> <div class="flex flex-row p-2 bg-gray-200 items-start" style="min-height: 100%" *ngFor="let productBucket of productsWithBuckets; let j = index;let row" > <div class="flex flex-col w-full"> <form (ngSubmit)="onSend(approvedPriceDealerCostForm)" #approvedPriceDealerCostForm="ngForm"> <div class="w-full flex flex-row"> <mat-form-field class="w-1/2 pr-1"> <input matInput placeholder="{{ 'totalsaleprice' | translate }}" name="totalsaleprice" [(ngModel)]="approvedPrice" required /> <mat-error> {{ 'required' | translate }} </mat-error> </mat-form-field> <mat-form-field class="w-1/2 pr-1"> <input matInput placeholder="{{ 'totaldealercost' | translate }}" name="totaldealerCost" [(ngModel)]="approvedDealerCost" required /> <mat-error> {{ 'required' | translate }} </mat-error> </mat-form-field> </div> </form> </div> </div> </mat-dialog-content> <mat-dialog-actions align="end" class="mt-4 align-bottom align-text-bottom"> <button (click)="onSend(approvedPriceDealerCostForm)" cdkFocusInitial class="" class="dave2-bg-success" mat-raised-button ngDave2Button color="primary" type="button" mat-button> {{ this.sending? 'saving': 'approveandsave' | translate }} </button> </mat-dialog-actions> </ng-container> </ng-dave2-task-instance-progress>

Answer 1

mat-dialog-actions在<form>元素之外，并且本地指针approvedPriceDealerCostForm不会在那里解析。

您可以做的是使用@ViewChild像这样在组件 ts 文件中获取对表单的引用：

 @ViewChild('approvedPriceDealerCostForm') approvedPriceDealerCostForm: NgForm;

然后在this.approvedPriceDealerCostForm方法或您在此处选择使用的任何其他方法中使用onSend 。