Question

我是Angular的新手，我正在一个项目中，我需要根据该列对表格进行排序，因此我正在使用角度材料https://material.angular.io/components/table/examples中带有排序的表格中的MatSort。但是我可以将表与值一起获取，但无法对表进行排序。

这是我的代码。

admin-user.component.html：

<table mat-table #table [dataSource]="dataSource" matSort class="mat-elevation-z8">

<!-- UserID Column -->
<ng-container matColumnDef="userid">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> User ID </th>
    <td mat-cell *matCellDef="let element"> {{element.userId}} </td>
</ng-container>

<!-- Name Column -->
<ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.userName}} </td>
</ng-container>

<!-- Title Column -->
<ng-container matColumnDef="booktitle">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
    <td mat-cell *matCellDef="let element"> {{element.bookTitle}} </td>
</ng-container>

<!-- Author Column -->
<ng-container matColumnDef="bookname">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Author </th>
    <td mat-cell *matCellDef="let element"> {{element.bookAuthor}} </td>
</ng-container>

<!-- Issue Date Column -->
<ng-container matColumnDef="issuedate">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Issue Date </th>
        <td mat-cell *matCellDef="let element"> {{element.issueDate}} </td>
    </ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

admin-user.component.ts：

export class AdminUserComponent implements OnInit {
users: User2[];
displayedColumns: string[] = [
    'userid',
    'username',
    'booktitle',
    'bookname',
    'issuedate'
];
dataSource: MatTableDataSource<IssueDetail>;

@ViewChild(MatSort) sort: MatSort;

issueList: IssueDetail[];

constructor(
    public userService: UserService,
    public bookService: BookService,
    public router: ActivatedRoute
) {
    // this.issueList = this.router.snapshot.data['resolvedData'];
    // console.log(this.issueList);
}

ngOnInit() {
    this.issueList = [];
    this.userService.getAllUsers().subscribe(users => {
        this.users = users.filter(user => user.checkout.length > 0);
        for (let i = 0; i < this.users.length; i++) {
            for (let j = 0; j < this.users[i].checkout.length; j++) {
                console.log(this.users[i].checkout);
                this.issueList.push(
                    new IssueDetail(
                        this.users[i].id,
                        this.users[i].name,
                        this.users[i].checkout[j].book.title,
                        this.users[i].checkout[j].book.author,
                        this.users[i].checkout[j].startDate + ''
                    )
                );
            }
        }
        console.log(this.issueList);
        this.dataSource = new MatTableDataSource(this.issueList);
        this.dataSource.sort = this.sort;
    });
}}

非常感谢您的任何帮助。enter image description here

enter image description here

IssueDetail是这样的类：

export class IssueDetail {
constructor(
    public userId: number,
    public userName: string,
    public bookTitle: string,
    public bookAuthor: string,
    public issueDate: string
) {
    this.userId = userId;
    this.userName = userName;
    this.bookTitle = bookTitle;
    this.bookAuthor = bookAuthor;
    this.issueDate = issueDate;
}}

我还观察到在每个示例中，它们都在使用接口。但是对于我的代码，我正在尝试对“类”进行排序。但是我不知道这有什么区别。

Answer 1

您的代码还可以，我所看到的，请尝试以下代码

setTimeout(() => { 
   this.dataSource.sort = this.sort;
}, 0);

Example

Answer 2

使用此生命周期挂钩：（ ngAfterViewInit ）

public class MyEntity {
    private String name;
    private int age;
    private int weight;

    public PersonDetailedDTO toPersonDetailedDTO() {
        PersonDetailedDTO person = PersonDetailedDTO();
        //...
        return person;  
    }

    public PersonDTO toPersonDTO() {
        PersonDTO person = PersonDTO();
        //...
        return person;  
    }
}

public class PersonDetailedDTO {
    private String name;
    private int age;
    private int weight;
}

public class PersonDTO {
    private String name;
    private int age;
}

@GetMapping
public PersonDTO get() {
   //...
   return personService.getPerson().toPersonDTO();
}

@GetMapping("/my_url")
public PersonDetailedDTO get() {
   //...
   return personService.getPerson().toPersonDetailedDTO();
}

例如垫表的数量：

@ViewChild(MatSort) sort: MatSort;

  ngAfterViewInit() {
        this.dataSource.sort = this.sort;
    }

Answer 3

尝试更改此行

...
 this.dataSource = new MatTableDataSource(this.issueList);
...

对此：

this.dataSource.data = this.issueList;

这样，您就不会创建新对象，而只是更改数据。我有类似的问题，并通过这种方法解决了。另一个问题可能是在某些父容器中使用* ngIf。

角度：MatSort不基于列标题对表进行排序

3 个答案: