Angular 5中MatTable数据外部访问及DataSource属性获取问题

我来帮你逐个解决这些Angular项目里的常见问题～

如果要在小屏幕完全替换成列表/卡片样式，推荐用Angular CDK的BreakpointObserver监听屏幕断点，动态切换模板：

首先在组件里注入断点监听服务：

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 监听是否为手机屏幕
  isMobile$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.isMobile$ = this.breakpointObserver.observe(Breakpoints.Handset)
      .pipe(map(result => result.matches));
  }
}

然后在模板里通过*ngIf切换表格和移动端布局：

<!-- 大屏幕显示MatTable -->
<mat-table *ngIf="!(isMobile$ | async)" [dataSource]="dataSource">
  <!-- 你的表格列定义 -->
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> 名称 </mat-header-cell>
    <mat-cell *matCellDef="let item"> {{item.name}} </mat-cell>
  </ng-container>
  <!-- 其他列... -->
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<!-- 小屏幕显示卡片/列表 -->
<div *ngIf="isMobile$ | async" class="mobile-card-list">
  <div *ngFor="let item of dataSource.data" class="mobile-card">
    <h4>{{item.name}}</h4>
    <p>{{item.description}}</p>
    <span class="tag">{{item.status}}</span>
    <!-- 其他需要展示的字段 -->
  </div>
</div>

再加一点CSS美化移动端卡片：

.mobile-card-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-card {
  padding: 1.2rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  background: #fff;
}

首先要确保你的RoutesDataSource类里的iterable属性是公开可访问的，推荐用getter方法封装（避免外部直接修改数据源）：

export class RoutesDataSource {
  private _iterable: YourDataType[] = [];

  constructor(private yourApiService: YourApiService) {
    this.loadData();
  }

  // 加载数据的方法
  private loadData(): void {
    this.yourApiService.getRoutes().subscribe(data => {
      this._iterable = data;
    });
  }

  // 公开的getter方法，供组件访问
  public get iterable(): YourDataType[] {
    return this._iterable;
  }
}

然后在组件里，只要实例化了RoutesDataSource，就能直接通过getter访问：

export class YourComponent {
  dataSource: RoutesDataSource;

  constructor(private routesDataSource: RoutesDataSource) {
    this.dataSource = routesDataSource;
    
    // 注意：如果数据是异步加载的，直接在constructor里拿可能为空，建议订阅数据加载完成的信号
    this.yourApiService.getRoutes().subscribe(() => {
      console.log(this.dataSource.iterable); // 这里能拿到完整数据
    });
  }
}

如果是在Stack Overflow提问时要高亮代码，只要用**三个反引号（```）**包裹代码块，后面加上对应语言标识即可：

• TypeScript代码：```typescript
• HTML代码：```html
• CSS代码：```css

举个高亮的TypeScript例子：

// 这是带语法高亮的TypeScript代码
import { Component } from '@angular/core';
import { RoutesDataSource } from './routes-data-source';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  constructor(private dataSource: RoutesDataSource) {}
}

如果是在你的Angular项目内要展示带高亮的代码（比如做内部文档），可以用ngx-highlightjs库，安装后配置对应语言包就能实现页面内的代码高亮。

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