要实现不改变 HTML 结构的 Angular 响应式表格设计,可以使用 Angular 的内置指令和样式来实现。下面是一个示例解决方法:
HTML 结构:
Name
Email
Phone
{{ user.name }}
{{ user.email }}
{{ user.phone }}
CSS 样式:
.table-container {
max-height: 300px;
overflow-y: auto;
}
table {
width: 100%;
}
th, td {
text-align: left;
padding: 10px;
border-bottom: 1px solid #ddd;
}
Angular 组件:
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from './user.service';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent {
users$: Observable;
constructor(private userService: UserService) {
this.users$ = this.userService.getUsers();
}
}
User 服务(user.service.ts):
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class UserService {
private users = [
{ name: 'John', email: 'john@example.com', phone: '1234567890' },
{ name: 'Jane', email: 'jane@example.com', phone: '0987654321' },
// more users...
];
getUsers(): Observable {
return of(this.users);
}
}
以上示例中,通过使用 Angular 的内置指令 *ngFor
来循环渲染用户数据。通过使用 CSS 样式来设置表格容器的最大高度和添加滚动条,来实现响应式表格的设计。