Angular 7中无Datasource的<mat-table>不显示问题求助

我来帮你搞定这个mat-table只显示线条不渲染内容的问题～

你当前的代码之所以只显示空边框，核心原因是没有遵循mat-table的核心渲染机制：缺少列定义（matColumnDef）的关联，也没有绑定数据到表格上。下面我给你一套完整的解决方案，包含在mat-card中混合使用不同控件的示例：

第一步：确保导入必要的Angular Material模块 #

首先要在你的模块文件（比如app.module.ts）里导入所有需要的模块，否则控件和表格都无法正常工作：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms'; // 用于ngModel双向绑定

// Angular Material核心模块
import { MatTableModule } from '@angular/material/table';
import { MatCardModule } from '@angular/material/card';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

// 你的组件
import { AppComponent } from './app.component';
import { SettingsTableComponent } from './settings-table/settings-table.component';

@NgModule({
  declarations: [
    AppComponent,
    SettingsTableComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    MatTableModule,
    MatCardModule,
    MatSlideToggleModule,
    MatSelectModule,
    MatOptionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第二步：编写组件TS逻辑（定义数据和列配置） #

在你的组件TS文件里，定义表格需要的列名数组和选项数据（包含控件类型、值等信息）：

import { Component } from '@angular/core';

// 定义选项数据的接口
interface SettingOption {
  name: string;
  type: 'toggle' | 'select'; // 标记要渲染的控件类型
  value: boolean | string;
  selectOptions?: string[]; // 下拉控件的选项列表
}

@Component({
  selector: 'app-settings-table',
  templateUrl: './settings-table.component.html',
  styleUrls: ['./settings-table.component.css']
})
export class SettingsTableComponent {
  // 表格要显示的列名
  displayedColumns: string[] = ['optionName', 'optionValue'];
  // 选项数据
  settingsData: SettingOption[] = [
    {
      name: '启用消息通知',
      type: 'toggle',
      value: true
    },
    {
      name: '主题模式',
      type: 'select',
      value: 'light',
      selectOptions: ['light', 'dark', '跟随系统']
    },
    {
      name: '自动同步数据',
      type: 'toggle',
      value: false
    }
  ];

  // 监听开关变化
  onToggleChange(newValue: boolean, option: SettingOption) {
    option.value = newValue;
    // 这里可以添加保存设置的业务逻辑
  }

  // 监听下拉选择变化
  onSelectChange(newValue: string, option: SettingOption) {
    option.value = newValue;
    // 这里可以添加保存设置的业务逻辑
  }
}

第三步：编写mat-card包裹的mat-table HTML #

在组件的HTML文件里，按照mat-table的规范编写结构，同时根据数据类型渲染不同控件：

<mat-card>
  <mat-card-header>
    <mat-card-title>系统设置</mat-card-title>
  </mat-card-header>
  <mat-card-content>
    <mat-table [dataSource]="settingsData">
      <!-- 选项名列定义 -->
      <ng-container matColumnDef="optionName">
        <mat-header-cell *matHeaderCellDef> 设置项 </mat-header-cell>
        <mat-cell *matCellDef="let item"> {{ item.name }} </mat-cell>
      </ng-container>

      <!-- 选项值列定义（混合不同控件） -->
      <ng-container matColumnDef="optionValue">
        <mat-header-cell *matHeaderCellDef> 设置值 </mat-header-cell>
        <mat-cell *matCellDef="let item">
          <!-- 渲染开关控件 -->
          <mat-slide-toggle 
            *ngIf="item.type === 'toggle'"
            [(ngModel)]="item.value"
            (change)="onToggleChange($event.checked, item)">
          </mat-slide-toggle>

          <!-- 渲染下拉选择控件 -->
          <mat-select 
            *ngIf="item.type === 'select'"
            [(ngModel)]="item.value"
            (selectionChange)="onSelectChange($event.value, item)">
            <mat-option 
              *ngFor="let opt of item.selectOptions" 
              [value]="opt">
              {{ opt }}
            </mat-option>
          </mat-select>
        </mat-cell>
      </ng-container>

      <!-- 表头行 -->
      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <!-- 数据行 -->
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </mat-card-content>
</mat-card>

关键知识点说明 #

1. 列定义（matColumnDef）：必须用ng-container包裹每个列的定义，这是mat-table识别表头和数据单元格关联关系的核心
2. 数据源绑定：直接把数据数组传给[dataSource]即可，不一定非要用MatTableDataSource（如果需要排序、过滤功能再用它）
3. 动态渲染控件：通过*ngIf根据数据的type字段，在同一个单元格里渲染不同的Angular Material控件
4. 双向绑定：用ngModel实现控件值和数据的实时同步，同时监听变化事件处理业务逻辑

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