Angular mat-select下拉选值后POST提交Excel到后端问题求助

现有代码核心问题 #

你的代码存在几个直接导致功能失效的问题：

• 命名冲突：模板里[(ngModel)]双向绑定的selectedTemplate是存储选中值的变量，TS里却把同名的selectedTemplate定义成了选中事件方法，Angular解析时会直接混淆，绑定完全失效，拿不到选中值。
• 数据源被覆盖：filter是*ngFor用来渲染下拉选项的数组，你在选中逻辑里直接把单个选中值赋给this.filter，选一次之后下拉选项就会被替换成单个字符串，后续直接无法选择。
• 事件未绑定：TS里写的选中回调没有绑定到<mat-select>标签上，用户选值的时候根本不会触发你写的赋值逻辑，TemplateName会一直是空值。
• 缺少必要声明：用到的filter、selectedTemplate、TemplateName、file等属性没有在类里提前声明，Angular严格模式下会直接报编译错误。

修正代码 #

HTML模板部分 #

<mat-form-field appearance="fill" class="dropDown1">
  <mat-select 
    [(ngModel)]="selectedTemplate"
    (selectionChange)="onTemplateSelect($event)"
  >
    <mat-option *ngFor="let item of filter" [value]="item.value">
      {{item.value}}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 保留原有上传触发按钮 -->
<button (click)="onUpload()">上传文件</button>

TS逻辑部分 #

import { Component } from '@angular/core';
import { MatSelectChange } from '@angular/material/select';
import { HttpClient } from '@angular/common/http';
import Swal from 'sweetalert2';
// 自行引入项目中用到的AppSetting服务、文件处理相关逻辑

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.css']
})
export class UploadComponent {
  // 提前声明所有用到的类属性
  // 下拉选项源数组，仅存储可选项，禁止在选中逻辑里修改这个数组
  filter: {value: string}[] = [];
  // ngModel双向绑定存储选中值的变量
  selectedTemplate: string = '';
  // 提交给后端的模板名字段
  TemplateName: string = '';
  // 待上传的文件对象
  file: File | null = null;

  constructor(
    private http: HttpClient,
    private appsetting: AppSetting // 替换成你项目里的配置服务
  ) {}

  // 下拉选中回调，方法名不要和绑定变量重名
  onTemplateSelect(trigger: MatSelectChange) {
    this.TemplateName = trigger.value;
    // 如果需要选中下拉项立刻把值发给后端，直接在这里写http请求逻辑即可，无需等上传按钮触发
  }

  onUpload(){
    // 前置校验，避免空值提交
    if (!this.file || !this.TemplateName) {
      Swal.fire({
        title:'请先选择文件和对应模板',
        icon: 'warning',
        heightAuto: false,
        width: 400
      });
      return;
    }

    let formData = new FormData();
    formData.set("file", this.file);
    formData.set("TemplateName", this.TemplateName);
    console.log('提交的模板名：', this.TemplateName);

    this.http.post(`${this.appsetting.baseURL}MyFiles/UploadExcelFile`, formData) 
    .subscribe((response)=>{
      console.log(response);
      Swal.fire({
        title:'Uploaded Successfully',
        icon: 'success',
        heightAuto: false,
        width: 400
      }).then((result)=>{
        if (result.isConfirmed){
          this.refreshPage();
        }
      })
    })
  }

  // 保留原有页面刷新、文件选择监听等自定义方法
  refreshPage() {
    window.location.reload();
  }
}

补充说明 #

• 如果不需要选中下拉项立刻触发逻辑，可以直接删掉(selectionChange)绑定和对应的onTemplateSelect方法，在onUpload方法里直接取this.selectedTemplate的值赋值给TemplateName即可，[(ngModel)]会自动同步用户选中的值，代码更简洁。
• 记得在对应的功能模块里导入MatSelectModule、MatFormFieldModule、FormsModule（支持ngModel必须导入），否则会报组件无法识别的错误。
• 下拉选项filter数组的初始化逻辑自行补充，比如在ngOnInit生命周期里从后端拉取选项列表再赋值。

内容的提问来源于stack exchange，提问作者Help please