Mat-masa Sıralama Demosu Çalışmıyor


114

mat-tableSıralamanın yerel olarak çalışmasını sağlamaya çalışıyorum ve verilerin beklendiği gibi gösterilmesini sağlayabilirken, başlık satırına tıklamak çevrimiçi örneklerde olduğu gibi sıralamayı yapmıyor (hiçbir şey olmuyor). Bu demoyu yerel olarak çalıştırmaya çalışıyorum: https://material.angular.io/components/sort/overview https://plnkr.co/edit/XF5VxOSEBxMTd9Yb3ZLA?p=preview

Angular CLI ile yeni bir proje oluşturdum, ardından şu adımları izledim: https://material.angular.io/guide/getting-started

İşte yerel dosyalarım:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatSort, MatTableModule } from '@angular/material';

import { AppComponent } from './app.component';
import { TableSortingExample } from './table-sorting-example';

@NgModule({
  declarations: [
    AppComponent,
    TableSortingExample,
    MatSort
  ],
  imports: [
    BrowserModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{title}}!
  </h1>
  <table-sorting-example></table-sorting-example>
</div>

table-sorting-example.html

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

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- ID Column -->
    <ng-container matColumnDef="userId">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="progress">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Progress </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.progress}}% </mat-cell>
    </ng-container>

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

    <!-- Color Column -->
    <ng-container matColumnDef="color">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Color </mat-header-cell>
      <mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </mat-cell>
    </ng-container>

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


<!-- Copyright 2017 Google Inc. All Rights Reserved.
    Use of this source code is governed by an MIT-style license that
    can be found in the LICENSE file at http://angular.io/license -->

table-sorting-example.ts

import {Component, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk/collections';
import {MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import 'rxjs/add/operator/map';

/**
 * @title Table with sorting
 */
@Component({
  selector: 'table-sorting-example',
  styleUrls: ['table-sorting-example.css'],
  templateUrl: 'table-sorting-example.html',
})
export class TableSortingExample {
  displayedColumns = ['userId', 'userName', 'progress', 'color'];
  exampleDatabase = new ExampleDatabase();
  dataSource: ExampleDataSource | null;

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    this.dataSource = new ExampleDataSource(this.exampleDatabase, this.sort);
  }
}

/** Constants used to fill up our data base. */
const COLORS = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
const NAMES = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];

export interface UserData {
  id: string;
  name: string;
  progress: string;
  color: string;
}

/** An example database that the data source uses to retrieve data for the table. */
export class ExampleDatabase {
  /** Stream that emits whenever the data has been modified. */
  dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
  get data(): UserData[] { return this.dataChange.value; }

  constructor() {
    // Fill up the database with 100 users.
    for (let i = 0; i < 100; i++) { this.addUser(); }
  }

  /** Adds a new user to the database. */
  addUser() {
    const copiedData = this.data.slice();
    copiedData.push(this.createNewUser());
    this.dataChange.next(copiedData);
  }

  /** Builds and returns a new User. */
  private createNewUser() {
    const name =
      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
      NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';

    return {
      id: (this.data.length + 1).toString(),
      name: name,
      progress: Math.round(Math.random() * 100).toString(),
      color: COLORS[Math.round(Math.random() * (COLORS.length - 1))]
    };
  }
}

/**
 * Data source to provide what data should be rendered in the table. Note that the data source
 * can retrieve its data in any way. In this case, the data source is provided a reference
 * to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
 * the underlying data. Instead, it only needs to take the data and send the table exactly what
 * should be rendered.
 */
export class ExampleDataSource extends DataSource<any> {
  constructor(private _exampleDatabase: ExampleDatabase, private _sort: MatSort) {
    super();
  }

  /** Connect function called by the table to retrieve one stream containing the data to render. */
  connect(): Observable<UserData[]> {
    const displayDataChanges = [
      this._exampleDatabase.dataChange,
      this._sort.sortChange,
    ];

    return Observable.merge(...displayDataChanges).map(() => {
      return this.getSortedData();
    });
  }

  disconnect() {}

  /** Returns a sorted copy of the database data. */
  getSortedData(): UserData[] {
    const data = this._exampleDatabase.data.slice();
    if (!this._sort.active || this._sort.direction == '') { return data; }

    return data.sort((a, b) => {
      let propertyA: number|string = '';
      let propertyB: number|string = '';

      switch (this._sort.active) {
        case 'userId': [propertyA, propertyB] = [a.id, b.id]; break;
        case 'userName': [propertyA, propertyB] = [a.name, b.name]; break;
        case 'progress': [propertyA, propertyB] = [a.progress, b.progress]; break;
        case 'color': [propertyA, propertyB] = [a.color, b.color]; break;
      }

      let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
      let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

      return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : -1);
    });
  }
}


/**  Copyright 2017 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license */

Neden çevrimiçi tablo gibi görüneceği konusunda bir fikri olan ancak sıralama işlevselliğinden yoksun olan var mı?


Önce uygulamanın hatalarını ayıklardım. Herhangi bir hata? koş ng test --sm=falseve ne çıkacağını gör.
k.vincent

Benim için @ViewChild (MatSort) sort: MatSort olmadan çalışıyor; Herhangi bir nedenle ?
user123456

Yanıtlar:


209

Bu sorunu yaşayan başka biri için: Sorun, MatSortModule'ü içe aktarmam gerektiğini söyleyen açısal malzemeler web sitesinde API referansını düzgün okumamış olmamdı. App.module.ts içindeki içe aktarma listemi şu şekilde değiştirdikten sonra:

imports: [
    BrowserModule,
    MatTableModule,
    MatSortModule
  ],

iyi çalıştı


47
belgelerde bu modülden bahsedilmez. material.angular.io/components/table/overview#sorting Bunun için de bir saatimi boşa harcadım.
Sonic Soul

9
bu sorun değil, başlık metni tıklanabilir ve simge de orada ancak sıralama hala çalışmıyor.
SPnL

3
BrowserAnimationsModuleApp.module.ts
Augustas

2
SOB olduklarını söyleyebilir miyim? ViewChild'imin neden çalışmadığını anlamaya çalışmak için 1 saat harcadım. Bu MatSortModule'ü MatTableModule'dan içe / dışa aktaramazlar mı?
Sampgun

7
Ben ithal ettik MatSortModuleve BrowserAnimationsModuleve i matColumnDef değer özellik adı ile eşleşen sağladıktan, ama hala o şey yaptırmak veremiyoruz.
Trevor

147

Sıralama işlevinin çalıştığına dair bir sorun yaşadım, ancak düzgün sıralamıyordu. Bunun matColumnDef, class / interfacereferans verdiğim mülkümle aynı ada sahip olması gerektiğini fark ettim matCellDef.

Angular Material belgelerine göre :

Varsayılan olarak, MatTableDataSource, sıralanan sütunun adının sütunun görüntülediği veri özelliği adıyla eşleştiği varsayımıyla sıralar.

Örneğin:

<ng-container matColumnDef="name"> 
    <mat-header-cell *matHeaderCellDef mat-sort-header> NAME </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>

nameİçinde matColumnDefyönergesi ile aynı olmak zorunda nameiçinde kullanılan <mat-cell>bileşen.


1
Örneğinizde neye atıfta bulunuyorsunuz? Karşılaştırma için arayüzünüzü de görmek faydalı olacaktır.
isherwood

1
Sütun adı olarak "Kimlik" kullanıyordum, varlık "id" içeriyordu. Durum farkı, çalışmamasına neden oluyordu (yeniden düzenleme hatası nedeniyle) .. Şimdi çözüldü. Teşekkürler
NitinSingh

2
Teşekkür ederim, çok faydalı.
Bohao LI

2
@NitinSingh, ya şu şekilde bir işlevi çağırmanız gerekirse: element`{{row.getName ()}}
kodentary

2
Size bir bira borçluyum çünkü bir süredir bu soruna takılı kaldım ve bu yorum sorunumu çözdü.
noel

108

Masa * ngIf içindeyse, çalışmayacaktır. [Gizli] olarak değiştirilirse çalışacaktır


38
!!! GÜNÜMÜ KAYDEDİN !!! Yerine kullanın<div *ngIf="xxx"><div [hidden]="!xxx">
Mark

1
Onaylayabilir miyim, bu benim için de çalıştı. Teşekkürler zerg!
clo5ure

1
Çok teşekkür ederim, bu bana çok zamana mal oldu !!
themightylc

2
Veya veri kaynağını ngOnInit yerine ngAfterViewInit olarak ayarlayın
user3666653

1
Bu olabilecek en "gizli" sorundur, çözüm için teşekkürler! belgeler bu konuda uyarmış olabilirdi
Raycherr

37

matColumnDef adı ve * matCellDef gerçek değer adı aynı olmalıdır

Misal:

<ng-container matColumnDef="oppNo">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Opportunity Number</th>
    <td mat-cell *matCellDef="let element">{{element.oppNo}}</td>
</ng-container>

Benim durumumda oppNo matColumnDef adı ve * matCellDef adı için aynı ve sıralama iyi çalışıyor.


İlginç. Benim için de böyleydi. Ama bunun arkasındaki asıl mantığı biliyor musunuz yoksa bu aslında bir tür "hata" mı?
ReturnTable

23

Ben de bu konuya çarptım. Çocuğun tanımlanmasını beklemeniz gerektiğinden AfterViewInit, onInit değil uygulamanız ve kullanmanız gerekir .

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

Harika! Teşekkürler
Shashank Vivek

Sıralama, filtreleme ve sayfalandırma içeren bir tablo kullanıyorum. Neden sadece sıralamanın tanımlanması gerektiğine dair bir fikriniz var ngAfterViewInitmı? Gerisi çalışıyordu ngOnInit. Sadece anlamaya çalışmak için, senin sayende düzeltildi
Nicolas M.

23

Zaman aşımı bloğu içinde sıralama eklemek benim için çalışıyor,

dataSource = new MatTableDataSource(this.articleService.getAllArticles());
setTimeout(() => {
  this.tableDataSource.sort = this.sort;
  this.tableDataSource.paginator = this.paginator;
});

Lifecykle kancaları kullanmak istemiyorsanız.


1
aptal hack ama işe yarıyor, neden zaman aşımı olmadan çalışmadığına dair bir fikriniz var mı?
Ruben

Diğer her şeyi denemek için çok uzun zaman harcadım, delirdiğimi düşündüm. Büyü gibi çalıştı!
willpnw

4
Bunu yapmanın gerçekten kötü bir yolu. Çalışır çünkü bileşenin başlatılmasından sonra dataSource'un inşa edilmesi için biraz zaman geçmesine izin verirsiniz ve ardından sıralama ve sayfalayıcı eklersiniz. En iyisi, datSource oluşturmayı ngOnInit'e taşımak ve ardından AfterViewInit'te sıralama ve sayfalayıcı atamalarını taşımaktır. Yaşam Döngüsü kancaları bunun için var.
Selam Getachew

14

Bu konuda saatler harcadım. Bir dizi konuyu okuduktan sonra, işte yaptığım adımlar.

  1. Gibi @avern söz , içe gerekir MatSortModule.
  2. Emin emin olun DEĞİL bir tabloyu çevreleyen *ngIf. Değiştirmek o [hidden]kadar @zerg tavsiye . (Nedenini anlamıyorum)

Bu yardımcı olur umarım.


Sorunu bulmak için günümü boşa harcadı ve aptal herhangi bir hata göstermiyor.
surekha shelake

11

Çözümüm birkaç şeyi düzeltmekti (temelde bu sayfadaki çözümlerin çoğunu birleştirerek).

Kontrol edilecek şeyler:

  1. BrowserModule, MatTableModule, MatSortModule Modüller kök modüller dosyasında içe aktarılmalıdır.
  2. MatTableDatasourceSınıfı kullandığınızdan ve veri dizinizi parametre olarak geçirdiğinizden emin olun.
  3. Tablonuzun bir *ngIf=....yönergede iç içe olmadığından emin olun . Bunun yerine diğer koşullu işlemleri kullanın (nedenini hala anlamadım).

5

Benim için 2 konu vardı.

  1. MatColumnDef ve matCellDef -> adları farklıdır
  2. Verileri servisten alıyordum. NgOnInit sıralaması çalışmıyordu. İle değiştirildi

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


4

Çalışmasına yardımcı olan bu eski blogu buldum: https://www.jeffryhouser.com/index.cfm/2018/10/23/Five-Reasons-My-ngMaterial-Table-wont-sort

  1. Aldığınızdan emin olun MatSortModule
  2. matSortBaşlığı belirtin
  3. Veri kaynağınızı bir MatTableDataSource
    • Bu (? Olsun sıralamak bana yardımcı biridir sıralama dışarı). Şablonda doğrudan diziye ( <table mat-table [dataSource]="this.products" matSort>) başvuruyordum, ancak code ( <table mat-table [dataSource]="this.dataSource" matSort>) içinde başlattığım veri kaynağı nesnesini kullanmalıydım . Veri kaynağı şu şekilde başlatılır:dataSource = new MatTableDataSource(this.products)
  4. Veri kaynağına sıralamanız hakkında bilgi verin. ngOnInit /ngAfterViewInit
  5. Kullanmak istemiyorsanız, kendi sıralamanızı yazın MatTableDataSource

3

Benim için * ngIf'i mat-table etiketi için [hidden] niteliğiyle değiştirmek işe yaradı. Bunu Angular Material topluluğuna bir hata olarak nasıl gönderebilirim?


3

Bunu senaryomda, tablo verilerini * matColumnDef ile aynı adla adlandırarak düzelttim Örneğin:

<!-- Name Column -->
<ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
  <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
</ng-container>

Yerine

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

2

MatSort'un çalışmamasının nedenlerinden biri this.dataSource.sort = this.sort, tanımlanmadan önce bir dataSource'a (yani ) eklendiği zamandır . Bunun birden çok nedeni olabilir:

  1. sıralamayı ngOnInit'e eklerseniz. Bu noktada şablon henüz oluşturulmamıştır, bu nedenle aldığınız MatSort @ViewChild(MatSort, { static: true }) sort: MatSort;tanımsızdır ve anlaşılır bir şekilde hiçbir şey yapmayacaktır. Bu sorun için bir çözüm this.dataSource.sort = sort, ngAfterViewInit'e geçmektir. NgAfterViewInit çağrıldığında, bileşeniniz oluşturulur ve MatSort tanımlanmalıdır.

  2. * ngIf kullandığınızda masa öğenizdeki şablonunuz veya ana öğelerse bir şablon ve bu * ngIf, MatSort'u ayarlamaya çalıştığınız anda tablonuzun oluşturulmamasına neden olur. Örneğin, *ngIf="dataSource.data.length > 0"tablo öğenizde (yalnızca veri mevcutsa onu oluşturmak için) varsa ve verilerinizi ayarladıktan this.dataSource.sort = this.sorthemen sonra ayarlarsanız this.dataSource.data. Bileşen görünümü henüz yeniden oluşturulmayacak, bu nedenle MatSort yine de tanımsız kalacak.

Tablonuzu göstermek şartlı hala işe MatSort almak ve amacıyla Değiştirmeye karar verebilir *ngIfile[hidden] birden diğer cevaplar da belirtildiği gibi. Ancak, * ngIf ifadenizi saklamak istiyorsanız aşağıdaki çözümü kullanabilirsiniz. Bu çözüm Angular 9 için çalışıyor, önceki sürümlerde test etmedim, bu yüzden orada çalışıp çalışmadığından emin değilim.

Bu çözümü burada buldum: https://github.com/angular/components/issues/10205

Koymak yerine:

@ViewChild(MatSort) sort: MatSort;

matSort için pasör kullanın. Bu ayarlayıcı, görünümünüzde matSort değiştiğinde (yani ilk kez tanımlandığında) ateşlenecektir, oklara tıklayarak sıralamanızı değiştirdiğinizde çalışmayacaktır. Bu şöyle görünecek:

@ViewChild(MatSort) set matSort(sort: MatSort) {
    this.dataSource.sort = sort;
}

Sıralamayı (programlı olarak) değiştiren başka işlevleriniz varsa, tekrar çalışıp çalışmayacağından emin değilim, bunu test etmedim. Sıralamayı yalnızca sıralama tanımsız ise ayarladığından emin olmak istemiyorsanız, şöyle bir şey yapabilirsiniz:

@ViewChild(MatSort) set matSort(sort: MatSort) {
    if (!this.dataSource.sort) {
        this.dataSource.sort = sort;
    }
}

Teşekkürler Emmy (& Abhijith-Nagaraja) :-) Sıralamada Ayarla işlevini kullanmak ızgara bileşenimdeki sıralamayı hayata geçirdi .. nihayet :-)
Kieran Ryan

2

Bu isimlerin eşit olması gerektiği konusunda kafası karışan herkes için bazı testler yaptım:

Bu çalışacaktır (özelliğin adı, sütun def ile aynıdır):

<ng-container matColumnDef="version">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
    <td mat-cell *matCellDef="let element"> {{element.version}} </td>
</ng-container>

displayedColumns: string[] = ['version']

Bu çalışmayacaktır (özelliğin adı, sütun def ile aynı değildir):

<ng-container matColumnDef="version2">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
    <td mat-cell *matCellDef="let element"> {{element.version}} </td>
</ng-container>

displayedColumns: string[] = ['version2']

Fyi, bu da işe yaramaz (bir mülkün uzunluğu):

<ng-container matColumnDef="length">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
    <td mat-cell *matCellDef="let element"> {{element.ids.length}} </td>
</ng-container>

displayedColumns: string[] = ['length']

Ve bu da yapmıyor:

<ng-container matColumnDef="ids.length">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Version </th>
    <td mat-cell *matCellDef="let element"> {{element.ids.length}} </td>
</ng-container>

displayedColumns: string[] = ['ids.length']

Üçüncü seçenek {{element.ids.length}} söz konusu olduğunda, veriler zaten bu şekilde modellenmişse bir çözüm var mı?
Paco Zevallos

1

Tablonuz bir * ngIf içindeyse ve bunun tablonuzu sıralamamakla ilgisi olduğunu düşünüyorsanız, kendi sortingDataAccessorişlevinizi belirtmeniz sorunu benim için olduğu gibi çözebilir. Masam bir çift * ngif'in içinde ve onu * ngif'lerden çıkarmak mantıklı gelmiyordu:

`ngAfterViewInit(): void {
        this.matchesDataSource.sort = this.sort;
        this.matchesDataSource.sortingDataAccessor = previewMatchSortingFn;
    }`

`export function previewMatchSortingFn(item: Match, header: string): string | number {
    switch (header) {
        case 'home':
            return item.homeTeam.name;
        case 'away':
            return item.awayTeam.name;
        case 'date':
            if (item.dateTime) {
                // this will return the number representation of the date
                return item.dateTime.valueOf();
            }
            return;
        default:
            break;
    }
}`

0

Aslında matColumnDef adı (yani sütun adı) ve Sınıf / Arayüz özellik adınız, çalışmasını sağlamak için eşit olmalıdır.

Bazen Sınıf / Arayüz özellik adımızı değiştiremiyoruz, bu durumda aşağıdaki gibi özel sıralama uygulayabiliriz.

let say your columns  as  ['id', 'name'] and 
your class/interface  as  ['userId', 'name']

'id' sütununda sıralama yaparsak işe yaramayacaktır. Özel sıralamayı deneyin

this.dataSource.sortingDataAccessor = (item,property)=>{

 // where item is your class/interface data
 // where property is your column name

       switch(property){
           case 'id' : return item.userId
           default: return item[property];
        }
}

0

Buraya kadar tüm cevapları okuduysanız ve hiçbir şey yardımcı olmadıysa, belki de benim sahip olduğum problemin aynısını yaşıyorsunuzdur.

Sorun şu ki, benim MatTableDataSourcenesnem

dataSource = new MatTableDataSource<StbElement>(ELEMENT_DATA);

Html dosyasında this.

Değiştirme:

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

Kime:

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

Sorun giderildi.


0

Bu soruya birden fazla cevap buldum, ancak bunları tek tek uygulamak bana hiçbir sonuç vermedi. Bu yüzden cevapları birleştirmeye çalıştım ve işe yaradı.

Öncelikle NgAfterViewInit arayüzüne ViewChild sıralaması ekledim. (Başlangıçta NgOnInit aracılığıyla çağrılan bir işlevin içindeydi.

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

İkinci adım için, * ngIf değerini bir konteynerin içinde [gizli] olarak değiştirdim. Değerin yüklenmediğini belirten bir hata alıyorum. Ancak şimdiye kadar endişelenilmesi gereken önemli bir konu değil.

önce

<div class="mat-elevation-z0 container-fluid" *ngIf={some boolean resultant condition}>

sonra

<div class="mat-elevation-z0 container-fluid" [hidden] = {negation of your boolean expression}>

psst .. Tablonuz mat-footer aracılığıyla yüklenirken yukarıdaki bs'nin üstüne bir yükleme çarkı eklemeyi de düşünebilirsiniz.

    <ng-container matColumnDef="loading">
                    <mat-footer-cell *matFooterCellDef colspan=6>
                        <div class="uploader-status">
                            <mat-spinner strokeWidth="25" [diameter]="100" title="Server Starting" ></mat-spinner>
                        </div>
                    </mat-footer-cell>
</ng-container>


<mat-footer-row *matFooterRowDef="['loading']" [ngStyle]="{'display': (this.candidateService.candidateRecords!=null) ? 'none':'block'}"></mat-footer-row>

-1

Konsolda herhangi bir javascript hatası olup olmadığına bakın. Sıralamanız başlatılmadan önce başka bir şey başarısız olabilir.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.