I use this datatable for angular everyone uses. But i get this annoying error in an alert! Who does this?! I have to use dtTrigger, because of the HTML structure. Note, some text is in german. I get the clubs from RXJS with a selector. It's working, but i get this alert. How can i prevent this alert?! Can anyone help me here?
Anyway, here is the code:
HTML-File
<app-pagetitle title="Meine Clubs"></app-pagetitle>
<div class="currentClub" *ngIf="currentClub">
<h3>{{ currentClub.title }}</h3>
<p>{{ currentClub.maxloss }}</p>
</div>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">Meine clubs</h4>
<p class="card-title-desc">
Hier findest du deine Clubs.
</p>
</div>
<div class="card-body">
<ng-container *ngIf="clubs$ | async as clubs">
<table
datatable
[dtTrigger]="dtTrigger"
[dtOptions]="dtOptions"
class="row-border hover table-responsive table"
*ngIf="clubs?.length; else noClubs"
>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let club of clubs">
<td>{{club.uid}}</td>
<td>{{club.title}}</td>
<td>
<a [routerLink]="'/club/'+club.uid" class="btn btn-success">Anzeigen</a>
<button *ngIf="currentClub.uid !== club.uid" (click)="selectClub(club.uid)" class="btn btn-info">Auswählen</button>
</td>
</tr>
</tbody>
</table>
<ng-template #noClubs>
<p>Noch keine clubs vorhanden</p>
</ng-template>
</ng-container>
</div>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
TS-File
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Select, Store } from '@ngxs/store';
import { Observable, Subject, takeUntil } from 'rxjs';
import { AuthStateSelectors } from 'src/app/state/auth/auth.selectors';
import { AuthClubModel } from 'src/app/state/auth/auth.state';
import { ClubModel } from 'src/app/state/club/club.state';
@Component({
selector: 'app-list-club',
templateUrl: './list-club.component.html',
styleUrls: ['./list-club.component.scss']
})
export class ListClubComponent implements OnInit, OnDestroy {
public dtOptions: DataTables.Settings = {};
public dtTrigger: Subject<any> = new Subject();
public currentClub!: AuthClubModel;
@Select(AuthStateSelectors.getAllClubs)
public clubs$!: Observable<ClubModel[]>;
private _ngUnsubscribe$!: Subject<void>;
public constructor(
private store: Store
) {}
public ngOnInit(): void {
this._ngUnsubscribe$ = new Subject<void>;
this.store.select(AuthStateSelectors.getAllClubs)
.pipe(takeUntil(this._ngUnsubscribe$))
.subscribe(clubs => {
this.currentClub = clubs.find(c => c.selected) as AuthClubModel;
this.dtTrigger.next(null);
});
this.dtOptions = {
pagingType: 'full_numbers',
responsive: true,
processing: true
};
}
public ngOnDestroy(): void {
this._ngUnsubscribe$.next();
this.dtTrigger.unsubscribe();
}
public selectClub(clubUid: string | null) {
}
}