Angular：如何解决core.js:6185的错误？

Question

我不知道这个错误是什么。我在Angular 9中使用sidenav from material.I have a this error: core.js:6185 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression在被检查后发生了变化。margin-left'的前值：'165'。当前值：'172'。

import { Component, OnInit, ViewChild } from "@angular/core";
import { Movie } from "src/app/models/movie.model";
import { MoviesService } from "src/app/services/movies.service";
import { MatPaginator } from "@angular/material/paginator";
import { MatTableDataSource } from "@angular/material/table";
import { MatSnackBar } from "@angular/material/snack-bar";
import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
import { DialogComponent } from "src/app/dialog/dialog.component";
import { MatSort } from "@angular/material/sort";

@Component({
  selector: "app-movie-list",
  templateUrl: "./movie-list.component.html",
  styleUrls: ["./movie-list.component.scss"],
})
export class MovieListComponent implements OnInit {
  displayedColumns: string[] = [
    "poster",
    "title",
    "originalTitle",
    "date",
    "vote",
    "remove",
  ];
  movies: Movie[];
  size: number;

  dataSource: MatTableDataSource<Movie>;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(
    private moviesService: MoviesService,
    private _snackBar: MatSnackBar,
    public dialog: MatDialog
  ) {}

  ngOnInit(): void {
    this.size = 0;
    this.moviesService.getMovies().subscribe((res) => {
      this.movies = res;
      this.size = this.movies.length;
      this.dataSource = new MatTableDataSource(this.movies);
      this.dataSource.paginator = this.paginator;
    });
  }

  openSnackBar(item: string) {
    this._snackBar.open(item, "Close", {
      duration: 3000,
      horizontalPosition: "right",
      verticalPosition: "bottom",
    });
  }

  remove(movie: Movie) {
    const isMovie = true;
    const dialogConfig = new MatDialogConfig();

    dialogConfig.data = {movie, isMovie};

    const dialogRef = this.dialog.open(DialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe((data) => {
      if (data === true) {
        this.moviesService.deleteMovie(movie.id).subscribe();
        this.dataSource.data.splice(this.movies.indexOf(movie), 1);
        this.dataSource = new MatTableDataSource<Movie>(this.dataSource.data);
        this.dataSource.paginator = this.paginator;
        this.size--;
        this.openSnackBar("Movie removed !");
      }
    });
  }
}

table {
  width: 100%;
  margin-top: 62px;
}

img {
  height: 140px;
  width: 100px;
  margin-top: 5%;
  margin-bottom: 5%;
}

.update {
  color: grey;
}

.notifications {
  text-align: center;
padding-top: 100px;
margin-left: 10px;
margin-right: 10px;
}

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #eee;
}

<mat-sidenav-container class="example-container">
  <mat-sidenav mode="side" opened>
    <div class="notifications">
      <h3>Movies List</h3>
      <h4 class="number"><span class="badge badge-primary">Total movies : {{ size }} </span></h4>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="mat-elevation-z8">
      <table mat-table [dataSource]="dataSource">
    
        <ng-container matColumnDef="poster">
          <th mat-header-cell *matHeaderCellDef> Poster</th>
          <td mat-cell *matCellDef="let element">
            <div *ngIf="element.poster_path; else noPoster">
              <img src="https://image.tmdb.org/t/p/w200/{{element.poster_path}}" alt="...">
            </div>
            <ng-template #noPoster>
              <img src="../../assets/not_found.jpg" alt="...">
            </ng-template>
          </td>
        </ng-container>
    
        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef> French title </th>
          <td mat-cell *matCellDef="let element"> {{element.title}} </td>
        </ng-container>
    
        <ng-container matColumnDef="originalTitle">
          <th mat-header-cell *matHeaderCellDef> Original title </th>
          <td mat-cell *matCellDef="let element"> {{element.original_title}} </td>
        </ng-container>
    
        <ng-container matColumnDef="date">
          <th mat-header-cell *matHeaderCellDef> Release date </th>
          <td mat-cell *matCellDef="let element"> {{element.release_date | date: 'dd MMMM, y'}} </td>
        </ng-container>
    
        <ng-container matColumnDef="vote">
          <th mat-header-cell *matHeaderCellDef> Vote </th>
          <td mat-cell *matCellDef="let element"> {{element.vote_average}} </td>
        </ng-container>
    
        <ng-container matColumnDef="remove">
          <th mat-header-cell *matHeaderCellDef> Remove </th>
          <td mat-cell *matCellDef="let element">
            <button mat-icon-button color="warn" (click)="remove(element)">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>
    
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    
      <mat-paginator [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons></mat-paginator>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

如果你有一些想法来解决，我将很高兴。

Answer 1

改变你的View Child这样的。

 @ViewChild(MatPaginator, {static : true}) paginator: MatPaginator;

试试这个。

    ngAfterContentInit() {
    this.size = 0;
    this.moviesService.getMovies().subscribe((res) => {
      this.movies = res;
      this.size = this.movies.length;
      this.dataSource = new MatTableDataSource(this.movies);
      this.dataSource.paginator = this.paginator;
    });

}