0

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) {
    
  }
}
Jonathan Sigg
  • 306
  • 3
  • 12

0 Answers0