Material table 在html 不能顯示DATA

General
1

用Material table 在html 不能顯示DATA

我的app.component.ts
export interface studinfo {

id: string;

name: string;

position: number;

gender: string;

class: string;

seat: string;

club: string;

persona: string;

crush: string;

breastsize: string;

strenght: string;

hairstyle: string;

color: string;

eyetype: string;

stockings: string;

accessory: string;

scheduletime: string;

scheduledestination: string;

scheduledeaction: string;

info: string;

}

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [’./app.component.scss’]

})

export class AppComponent implements OnInit {

title = ‘anmattable’;

emailsDataSource = new MatTableDataSource();

data2: any[];

constructor(private httpClient: HttpClient) {}

ngOnInit()

{

const options = { responseType: 'text' as 'json'};

this.httpClient.get<any>('assets/student.json')

.subscribe(data => {

 // this.emailsDataSource.data = data[' results '];

  this.emailsDataSource = new MatTableDataSource<studinfo[]>(data);

  console.log(this.emailsDataSource.data.length);

  console.log(this.emailsDataSource.data);

});

}

reply(emailRow) {
console.log(‘回覆信件’, emailRow);
}
delete(emailRow) {
console.log(‘刪除信件’, emailRow);
}
}

我的HTML:
<mat-table [dataSource]=“emailsDataSource”>

<mat-header-cell *matHeaderCellDef>寄件人</mat-header-cell>

<mat-cell *matCellDef="let row">{{ row.user}}</mat-cell>

<mat-header-cell *matHeaderCellDef>標題</mat-header-cell>

<mat-cell *matCellDef="let row">{{ row.gender }}</mat-cell>

<mat-header-cell *matHeaderCellDef>日期</mat-header-cell>

<mat-cell *matCellDef="let row">{{ row.color }}</mat-cell>

<mat-header-cell *matHeaderCellDef>

  <u>管理</u>

</mat-header-cell>

<mat-cell *matCellDef="let row">

  <button mat-button color="primary" (click)="reply(row)">回覆</button>

  <button mat-button color="warn" (click)="delete(row)">刪除</button>

</mat-cell>

<mat-header-row *matHeaderRowDef="[‘name’,‘gender’,‘color’, ‘management’]">>

我在ts檔案console.log(this.emailsDataSource.data);是有object data.
(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

我是參考以下這個網頁:

thank you very much.

2

它能顯示入JSON 讀取資料

image
image838×487 22.5 KB

3

妳的json
裡面沒有user欄位
而且大小寫也不一樣

試看看
{{ row.ID }}
{{ row.Name }}

這樣資料能否出來

4

我更改了，仍然是沒有DATA 出現。
thank you very much.

image
image1262×539 2.16 KB

5

那用ng-container 標籤去包呢?

HTML部分

 <ng-container matColumnDef="user">
    <mat-header-cell *matHeaderCellDef>寄件人</mat-header-cell>
    <mat-cell *matCellDef="let row">{{ row.ID }}</mat-cell>
  </ng-container>

然後再調整調用的試試大寫小寫
{{ row.ID }}
{{ row.id }}
{{ row.Name }}…之類的

或是再開F12貼錯誤訊息上來

6

已經根據你的方法來解決了，原來它是根據JSON 檔案裏的名來輸出。多謝。

1個讚