将材料表的内容复制到剪贴板
将材料表的内容复制到剪贴板
提问于 2020-06-20 22:16:01
我用的是Angular 9和材料表。我想有一个按钮，可以复制表的内容到ClipBoard。我尝试使用[cdkCopyToClipboard]并将其绑定到dataSource，但是当我复制时，我得到的结果是[object Object]。有人能帮帮我吗？
app.component.ts
import {Component, OnInit, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
export interface UserData {
id: string;
name: string;
progress: string;
color: string;
}
/** Constants used to fill up our data base. */
const COLORS: string[] = [
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
'aqua', 'blue', 'navy', 'black', 'gray'
];
const NAMES: string[] = [
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
];
/**
* @title Data table with sorting, pagination, and filtering.
*/
@Component({
selector: 'table-overview-example',
styleUrls: ['table-overview-example.css'],
templateUrl: 'table-overview-example.html',
})
export class TableOverviewExample implements OnInit {
displayedColumns: string[] = ['name'];
dataSource: MatTableDataSource<UserData>;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
@ViewChild(MatSort, {static: true}) sort: MatSort;
constructor() {
// Create 100 users
const users = Array.from({length: 100}, (_, k) => createNewUser(k + 1));
// Assign the data to the data source for the table to render
this.dataSource = new MatTableDataSource(users);
}
ngOnInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
}
/** Builds and returns a new User. */
function createNewUser(id: number): UserData {
const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
return {
id: id.toString(),
name: name,
progress: Math.round(Math.random() * 100).toString(),
color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
};
}app.component.html
<mat-form-field>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia">
</mat-form-field>
<div class="mat-elevation-z8">
<button [cdkCopyToClipboard]="dataSource">Click to Copy</button>
<table mat-table [dataSource]="dataSource" matSort>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let row"> {{row.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>正如您在html文件中所看到的，它允许您复制内容，但不知何故它不能与MatTableDataSource一起工作。提前谢谢。
Stack Overflow用户
发布于 2020-06-20 23:33:01
您需要将object更改为JSON。
第一种方法：
将以下内容添加到constructor()中的app.component.ts
const copiedData = JSON.stringify(this.datasource.data);并改变这一点：
<button [cdkCopyToClipboard]="dataSource">Click to Copy</button>要这样做：
<button [cdkCopyToClipboard]="copiedData">Click to Copy</button>第二种方法：
在app.component.ts中创建新函数
copyData() {
return JSON.stringify(this.dataSource.data);
}并使用：
<button [cdkCopyToClipboard]="copyData()">Click to Copy</button>如果您希望复制的数据仅为object的值。
在本例中，我假设您的表将有多个列。
下面是一个简单的示例：
copyData() {
let data = "";
this.dataSource.data.forEach(row => {
data += this.ObjectToArray(row)
})
return data;
}
ObjectToString(obj: Object): string {
// If you are using ES8 you can use const result = Object.values(obj);
// else use the code give below
let result = Object.keys(obj).map((key: keyof typeof obj) => {
let value = obj[key];
return value;
});
// then return the result as string along with a new line
result.toString() + "\n";
}Here是stackblitz中的一个工作示例。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62486972
复制相关文章
相似问题
腾讯云开发者
