Angular 7.3.9项目遭遇TS1109与TS1005编译错误求助

环境 #

• Angular 7.3.9

组件代码 #

import { Component, OnInit } from '@angular/core'; 
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { ICAREServices, IMASTServices } from 'src/app/services'; 
 

@Component({
  selector: 'app-mast-service',
  templateUrl: './app-mast-service.component.html',   
  styleUrls: ['./app-mast-service.component.scss']
})
export class AppMastServiceComponent implements OnInit {
  billItemTypeIds : number[] =[-5,-6,-8];
  billItemTypeId : number;
  billItemTypeMast : any;
  billItemMast : any;
  billItemMastByType : any;
  searchColsForm : FormGroup; 
  
  constructor(private icareservices: ICAREServices,private formBuilder : FormBuilder,private toastr: ToastrService,private imastservices: IMASTServices ) { }

  ngOnInit() {
    this.icareservices.listBillItemTypeMastByIds(this.billItemTypeIds).subscribe(response =>{
      this.billItemTypeMast =response;
    })

    this.icareservices.listBillableItems().subscribe(response =>{
      this.billItemMast =response;
    })    
    
    this.searchColsForm = this.formBuilder.group({
      serviceType : new FormControl(),
      serviceId : new FormControl()     
    });                
    
    this.searchColsForm.get('serviceType')?.valueChanges.subscribe(
      data=>{
        this.billItemMastByType = this.billItemMast.filter(item => item.allergyTypeCode === data);
      }
    )
   
  }

}

编译错误 #

ERROR in src/app/hims/app-mast-service/app-mast-service.component.ts(37,44): error TS1109: Expression expected.
src/app/hims/app-mast-service/app-mast-service.component.ts(43,3): error TS1005: ':' expected.

问题分析 #

Angular 7.3.9对应的TypeScript版本为3.2.x，而可选链操作符?.是TypeScript 3.7才引入的语法，当前编译器无法识别该语法，这是报错的核心原因。即使移除filter相关代码，?.语法依然存在，所以错误会持续出现。

另外还有一个潜在问题：billItemMast通过异步接口赋值，在valueChanges触发时可能还未完成加载，直接调用filter会触发undefined报错。

解决方案 #

1. 替换可选链?.为传统的空值检查方式
2. 增加billItemMast的非空判断，避免异步加载导致的报错

修改后的ngOnInit代码：

ngOnInit() {
  this.icareservices.listBillItemTypeMastByIds(this.billItemTypeIds).subscribe(response =>{
    this.billItemTypeMast = response;
  })

  this.icareservices.listBillableItems().subscribe(response =>{
    this.billItemMast = response;
  })    
  
  this.searchColsForm = this.formBuilder.group({
    serviceType : new FormControl(),
    serviceId : new FormControl()     
  });                
  
  // 先获取表单控件，再判断是否存在
  const serviceTypeControl = this.searchColsForm.get('serviceType');
  if (serviceTypeControl) {
    serviceTypeControl.valueChanges.subscribe(data =>{
      // 确保billItemMast已加载完成再执行filter
      if (this.billItemMast) {
        this.billItemMastByType = this.billItemMast.filter(item => item.allergyTypeCode === data);
      }
    })
  }
 
}

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