Angular上的新人.我有一个输入类Foo,其中包含图书列表,Book类具有Id、Title和Details属性.我将其显示在带有输入的表格中,以便用户可以添加、编辑或删除图书列表.某处有一个按钮可以添加和删除书籍.这运行良好.
我想添加一个排序,但它不起作用.我在应用模块中添加了MatSort和Sort.我放入Angular本身的排序代码块.我做错了什么?
我是否应该在MatTable中更改它,而不是循环通过表单数组?如果是这样,如何通过输入来实现这一点,而不是将每个数据显示为变量{{Element.title}}等?
感谢所有的帮助.
TS
@Input() foo: Foo;
@ViewChild(MatSort, {static: true}) sort: MatSort;
bookForm: FormArray;
orderForm: FormGroup;
bookList !: Book[];
bookSorted : Book[];
initForm() {
this.orderForm= this._formBuilder.group( {
customerForm: this._formBuilder.array( [] ),
bookForm: this._formBuilder.array( [] )
} );
this.addedBooks()
this.bookList = this.foo.Books;
}
addedBooks() {
this.bookForm= this.orderForm.get( 'bookForm' ) as FormArray;
this.bookForm.clear();
let _bookForm = this.foo.books?.map( _book => this.addBook( _book ) );
_bookForm?.forEach( _addBook => this.bookForm.push( _addBook ) );
}
addBook( _book) {
return this._formBuilder.group( {
title: new FormControl( _book?.title),
description: new FormControl( _book?.description ),
id: new FormControl( _book?.id ?? Guid.EMPTY ),
} );
}
get bookFormControls() {
return ( this.orderForm.get( 'bookForm' ) as FormArray ).controls;
}
sortBook(sort: Sort) {
const data = this.bookList.slice();
if (!sort.active || sort.direction == '') {
this.bookSorted = data;
return;
}
this.bookSorted = data.sort((a, b) => {
let isAsc = sort.direction == 'asc';
switch (sort.active) {
case 'title': return this.compare(a.title, b.title, isAsc);
case 'description': return this.compare(+a.description, +b.description, isAsc);
default: return 0;
}
});
}
compare(a, b, isAsc) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
removeBooksAt( index ) {
this.dialogName = "Book"
this.modalRef = this.dialog.open( this.deleteBook, {
width: '600px',
} );
this.modalRef.afterClosed().subscribe( res => {
if ( res ) this.bookForm.removeAt( index );
} );
}
addNewBook() {
let formValue = this.orderForm.controls['bookForm'] as FormArray;
formValue.status == 'VALID' ? this.createBooksForm() : this.showToast();
}
createBooksForm(data?: any) {
this.booksForm = this.orderForm.get( 'booksForm ' ) as FormArray;
this.booksForm .push( this.addBooksControls(data) );
}
addBooksControls(data?: any): FormGroup {
return this._formBuilder.group( {
title: [data?.title ??'', Validators.required],
description: [data?.description ??'', Validators.required],
id: [data?.id ??Guid.EMPTY]
} );
}
HTML
<!--Mat Sort Test-->
<fieldset>
<div>
<legend>Books</legend>
<table matSort (matSortChange)="sortBook($event)" class="card-table">
<thead class="primary-color">
<tr>
<th mat-sort-header="title">
Book Title
</th>
<th mat-sort-header="description">
Description
</th>
<th class="colums-name">
Actions
</th>
</tr>
</thead>
<tbody>
<tr class="margin-1" formArrayName="bookForm"
*ngFor="let group of bookFormControls; let _i = index;">
<td [formGroupName]="_i">
<input type="text" formControlName="title" class="margin-1 readonly" placeholder="Add title">
</td>
<td [formGroupName]="_i">
<input type="text" formControlName="description" class="margin-1 readonly"
placeholder="Add description">
<input type="hidden" formControlName="id">
</td>
<td style="text-align: center;">
<i (click)="removeBooksAt(_i, 'Title')" class="fa fa-trash margin-right-mini"
style="color:darkgrey; font-size: xx-large;;" aria-hidden="true"></i>
</td>
</tr>
</tbody>
</table>
</div>
</fieldset>