Angular的mat-sort在带有点符号的matColumnDef上无效的问题可以通过以下解决方法来解决：

1. 使用正则表达式移除点符号： 在模板文件中，使用正则表达式将带有点符号的matColumnDef转换为没有点符号的形式。例如，将".columnName"转换为"columnName"。

   
   
      Column Name 
      {{element.columnName}} 
   
   

2. 在组件中使用自定义排序函数： 在组件中，定义一个自定义的排序函数并将其应用到mat-sort的相应列上。在这个函数中，可以使用点符号来访问嵌套属性。

   // 组件代码
   import { MatSort } from '@angular/material/sort';
   import { MatTableDataSource } from '@angular/material/table';
   import { Component, ViewChild, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-my-component',
     templateUrl: './my-component.component.html',
     styleUrls: ['./my-component.component.css']
   })
   export class MyComponent implements OnInit {
     @ViewChild(MatSort, { static: true }) sort: MatSort;
     dataSource = new MatTableDataSource();
     displayedColumns = ['columnName'];
   
     ngOnInit() {
       // 设置数据源和排序
       this.dataSource.data = this.getData();
       this.dataSource.sort = this.sort;
   
       // 自定义排序函数
       this.dataSource.sortingDataAccessor = (data, sortHeaderId) => {
         const propPath = sortHeaderId.split('.');
         return propPath.reduce((obj, property) => obj && obj[property], data);
       };
     }
   
     getData() {
       // 返回数据数组
     }
   }
   

   
   
       
   
     
    Column Name 
       
    {{element.columnName}} 
     
   
     
   
     
   
   
   

这些解决方法将帮助您在带有点符号的matColumnDef上有效地使用mat-sort。