Как решить ошибку undefined' is not assignable to type 'CdkTableDataSourceInput' и почему она возникла?

Question

[malayamarisha]

Доброго времени суток!
В проект внедрен Angular Material.
В шаблоне компонента пытаюсь вывести таблицу в задачами (разметка таблицы взята с https://material.angular.io/components/table/overview).
В компоненте делаю: dataSource?: MatTableDataSource
Возникает ошибка: Type 'MatTableDataSource | undefined' is not assignable to type 'CdkTableDataSourceInput'

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

Подскажите, что делаю не так? В каком направлении двигаться?

Попытки:

dataSource: MatTableDataSource<Task> = new MatTableDataSource([])

public dataSource?: MatTableDataSource<Task> = new MatTableDataSource<Task>([]);

На stackblitz ошибки нет - https://angular-ivy-mlo5qg.stackblitz.io

Answer 1

[eRKa]

В ошибке все написано: тип MatTableDataSource не соответствует типу CdkTableDataSourceInput. Видимо Вы пытаетесь передать в компонент поле типа MatTableDataSource, это Ваш dataSource, а он ожидается параметр типа CdkTableDataSourceInput.

Comments

[malayamarisha]

В шаблоне есть таблица

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

В компоненте dataSource: MatTableDataSource
Данные Task:

static tasks: Task[] = [
    {
      id: 1,
      title: 'Залить бензин полный бак',
      priority: TestData.priorities[2],
      completed: false,
      category: TestData.categories[9],
      date: new Date('2019-04-10')
    },

    {
      id: 2,
      title: 'Передать отчеты начальнику управления',
      priority: TestData.priorities[0],
      completed: false,
      category: TestData.categories[0],
      date: new Date('2019-04-11')
    }
]

Подскажите, пожалуйста, как исправить?
Делаю по документации angular material, там нет упоминаний про cdk

Наблюдение:
Если, к примеру, в компоненте указать массив задача напрямую (newTasks=[{},{},{}]) и в шаблоне [dataSource]="newTasks", то ошибок нет.
Если в компоненте указать tasks?: Task[] и в шаблоне [dataSource]="tasks", то возникает ошибка.
При выводе в консоль newTasks и tasks содержат одинаковую структуру и данные.

[eRKa]

Вам нужно зайти в компонент table и посмотреть какой тип имеет поле dataSource, посмотреть что за объект с какими свойствами он принимает. Тип должен совпадать, иначе компилятор будет ругаться тем сообщением, которое Вы показали. Тот dataSource, который Вы пытаетесь передать имеет тип MatTableDataSource, а судя по сообщению, он хочет CdkTableDataSourceInput.

Я вижу в документации, что если использовать просто тег table, то должен использоваться атрибут cdk

<table cdk-table [dataSource]="dataSource" fixedLayout>

Либо надо делать так
<cdk-table [dataSource]="dataSource">

т.е здесь <table cdk-table [dataSource]="dataSource" он ждет тип CdkTableDataSourceInput, а здесь <cdk-table [dataSource]="dataSource"> MatTableDataSource

[malayamarisha]

Вам нужно зайти в компонент table

- кажется я запуталась ) Не в компоненте tasks?

В tasks.component.ts пробую разные варианты:

public dataSource?: MatTableDataSource<Task> = new MatTableDataSource<Task>([]) //первый вариант

public dataSource?: MatTableDataSource<Task> //второй вариант

В tasks.component.ts
<cdk-table [dataSource]="dataSource">
Я искренне не понимаю, почему на stackblitz всё работает
Ссылка на рабочий код, в котором используется

<table>, но dataSource: MatTableDataSource<Task> = new MatTableDataSource<Task>([])

Я вижу в документации, что если использовать просто тег table, то должен использоваться атрибут cdk

- подскажите, пожалуйста, где указано в документации? Не исключено, что не там смотрю. В версиях 13 и 12 в качестве примеров указаны с тегами table

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8"> //12 версия, у меня 12
<table cdk-table [dataSource]="dataSource"> //13 версия

[eRKa]

Там работает потому, что компилятор, видимо, не так строго проверяет типы. Ваш компилятор ts, видимо настроен более строже.
Если дело только в описании типа, то попробуйте хак, по которому будет видно в этом дело или нет
dataSource = (new MatTableDataSource([])) as any
или вообще так
dataSource = ((new MatTableDataSource([])) as any) as CdkTableDataSourceInput
Попробуйте вскормить ему тот тип, который он хочет.

[malayamarisha]

Ваш компилятор ts, видимо настроен более строже.

- может есть возможность скорректировать настройки?

dataSource = (new MatTableDataSource([])) as any

- так ошибки нет, выводится только шапка таблицы(<cdk-table [dataSource]="dataSource">)
В консоли вижу

<table _ngcontent-adt-c134="" cdk-table="" class="cdk-table" role="table" ng-reflect-data-source="[object Object]">

dataSource = ((new MatTableDataSource([])) as any) as CdkTableDataSourceInput

- так "Cannot find name 'CdkTableDataSourceInput'". С помощью IDE можно создать класс/интерфейс

[malayamarisha]

dataSource = (new MatTableDataSource([])) as any

- кажется удалось решить проблему c помощью Вашей помощи )

Шаблон:

<table cdk-table [dataSource]="dataSource">

        <!--  цвет приоритета  -->
        <ng-container cdkColumnDef="color">
          <th cdk-header-cell *cdkHeaderCellDef>111111111</th>
          <td cdk-cell *cdkCellDef="let task" [style.background-color]="getPriorityColor(task)"></td>
        </ng-container>
//остальные колонки
</table>

Компонент:

export class TasksComponent implements OnInit {
  public displayedColumns: string[] = ['color', 'id', 'title', 'date', 'priority', 'category'];
  public dataSource: MatTableDataSource<Task> = new MatTableDataSource<Task>()
  tasks?: Task[]

  constructor(private dataHandler: DataHandlerService) {
  }

  ngOnInit() {
    this.dataHandler.tasksSubject.subscribe(tasks => this.tasks = tasks)
    this.dataSource = new MatTableDataSource<Task>(this.tasks)

    this.refreshTable()
  }

  toggleClickCompleted(task: Task) {
    task.completed = !task.completed
  }

  getPriorityColor(task: Task) {

    if (task.priority && task.priority.color) {
      return task.priority.color
    }

    return '#fff'
  }

  private refreshTable() {
  }
}