Javascript 为什么此角度材质表不渲染?
我正在使用Angular 9和Angular材质制作一个Contacts应用程序。对于每个联系人,列表组件应在表行中显示一些信息和图像 在我的Javascript 为什么此角度材质表不渲染?,javascript,angular,angular-material,Javascript,Angular,Angular Material,我正在使用Angular 9和Angular材质制作一个Contacts应用程序。对于每个联系人,列表组件应在表行中显示一些信息和图像 在我的app.module.ts中,我导入了MatTableModule 在app\services\contacts list.service.ts中,我有: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { HttpClient, H
app.module.ts
中,我导入了MatTableModule
在app\services\contacts list.service.ts
中,我有:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Contact } from '../models/Contact';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
}
@Injectable({
providedIn: 'root'
})
export class ContactsListService {
contactsUrl = 'https://randomuser.me/api/?&results=20&inc=name,location,email,cell,picture';
constructor(private http:HttpClient) { }
getContcts():Observable<Contact[]> {
return this.http.get<Contact[]>(`${this.contactsUrl}`)
.pipe(map(response => response['results']));
}
getOneContact():Observable<Contact[]> {
return this.http.get<Contact[]>(`${this.contactsUrl}`)
.pipe(map(response => response['results']));
}
}
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
pageTitle = 'My Contacts';
contactsList:Contact[];
constructor(private ContactsListService:ContactsListService) { }
contactsTableData: MatTableDataSource<any>;
displayedColumns: string[] = ['fullName', 'photo', 'email', 'city', 'country'];
ngOnInit(): void {
// Contact list
this.ContactsListService.getContcts().subscribe(
contactsList => {
this.contactsList = contactsList; console.log(contactsList);
this.contactsTableData = new MatTableDataSource(contactsList);
},
error => { }
);
}
}
I上述组件的模板:
<div class="container">
<h2 class="mat-display-1 page-title">{{pageTitle}}</h2>
<div class="mat-elevation-z8">
<mat-table [data-source]="contactsTableData">
<ng-container matColumnDef="fullName">
<mat-header-cell *matHeaderCellDef> Full Name </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.name.first}} {{element.name.last}} </mat-cell>
</ng-container>
<ng-container matColumnDef="photo">
<mat-header-cell *matHeaderCellDef> Photo </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.picture.large}} </mat-cell>
</ng-container>
<ng-container matColumnDef="email">
<mat-header-cell *matHeaderCellDef> Email address </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
</ng-container>
<ng-container matColumnDef="city">
<mat-header-cell *matHeaderCellDef> City </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.location.city}} </mat-cell>
</ng-container>
<ng-container matColumnDef="phone">
<mat-header-cell *matHeaderCellDef> Phone </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.cell}} </mat-cell>
</ng-container>
<ng-container matColumnDef="country">
<mat-header-cell *matHeaderCellDef> Country </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.location.country}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
</div>
缺少什么?在卫生棉条上,
垫表
应使用[dataSource]
而不是[dataSource]
。这会解决你的问题
另外,快速提示,您的响应不会返回一个
ContactAM
数组,而是返回一个名为results
的属性的对象,该属性的值为ContactAM
数组。因此,在您的服务上
,您执行HTTP GET呼叫
并将其键入ContactAM[]
,您应该实际将其键入{results:ContactAM[]}
以下是问题的解决方法,以防其他人使用此信息:
在app\components\list\list.component.ts
文件中,我有:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
pageTitle = 'My Contacts';
contactsList:Contact[];
constructor(private ContactsListService:ContactsListService) { }
contactsTableData: MatTableDataSource<any>;
displayedColumns: string[] = ['fullName', 'photo', 'email', 'phone', 'city', 'country'];
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit(): void {
// Contact list
this.ContactsListService.getContcts().subscribe(
contactsList => {
this.contactsList = contactsList;
this.contactsTableData = new MatTableDataSource(contactsList);
this.contactsTableData.paginator = this.paginator;
},
error => { }
);
}
}
似乎使用了
,而不是
?(编辑:不考虑我的猜测,他们也使用th mat header单元格
,但你说你的header代码确实有效)文档似乎也使用数据源
,而不是数据源
。你可以试着改变它。@AkashBhardwaj这确实是个问题。是的,我在看一本旧的(er)教程。谢谢
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { from } from 'rxjs';
import { ContactsListService } from '../../services/contacts-list.service';
import { Contact } from '../../models/Contact';
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
pageTitle = 'My Contacts';
contactsList:Contact[];
constructor(private ContactsListService:ContactsListService) { }
contactsTableData: MatTableDataSource<any>;
displayedColumns: string[] = ['fullName', 'photo', 'email', 'phone', 'city', 'country'];
@ViewChild(MatPaginator) paginator: MatPaginator;
ngOnInit(): void {
// Contact list
this.ContactsListService.getContcts().subscribe(
contactsList => {
this.contactsList = contactsList;
this.contactsTableData = new MatTableDataSource(contactsList);
this.contactsTableData.paginator = this.paginator;
},
error => { }
);
}
}
<div class="container">
<div class="mat-elevation-z8">
<table mat-table [dataSource]="contactsTableData" class="w-100">
<ng-container matColumnDef="fullName">
<th mat-header-cell *matHeaderCellDef>Full Name</th>
<td mat-cell *matCellDef="let element">{{element.name.first}} {{element.name.last}}</td>
</ng-container>
<ng-container matColumnDef="photo">
<th mat-header-cell *matHeaderCellDef>Photo</th>
<td mat-cell *matCellDef="let element">
<img src="{{element.picture.large}}" alt="{{element.name.first}} {{element.name.last}}" class="thumbnail rounded-circle">
</td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef>Email address</th>
<td mat-cell *matCellDef="let element">
<a href="mailto:{{element.email}}">{{element.email}}</a>
</td>
</ng-container>
<ng-container matColumnDef="phone">
<th mat-header-cell *matHeaderCellDef>Phone</th>
<td mat-cell *matCellDef="let element">
<a href="tel:{{element.phone}}">{{element.cell}}</a>
</td>
</ng-container>
<ng-container matColumnDef="city">
<th mat-header-cell *matHeaderCellDef>City</th>
<td mat-cell *matCellDef="let element">{{element.location.city}}</td>
</ng-container>
<ng-container matColumnDef="country">
<th mat-header-cell *matHeaderCellDef>Country</th>
<td mat-cell *matCellDef="let element">{{element.location.country}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 20, 50]" [pageSize]="10" showFirstLastButtons></mat-paginator>
</div>
</div>
.rounded-circle {
border-radius: 50%!important;
}
.thumbnail {
padding: 2px;
line-height: 1;
background-color: #fff;
border: 1px solid #ddd;
height: 40px;
width: auto;
}