Skip to content

ivy: cdkVirtualForOf template type errors #17411

@Splaktar

Description

@Splaktar

Reproduction

Build dev-app with Ivy

Expected Behavior

The demo compiles.

Actual Behavior

ERROR: /Users/splaktar/Git/angular/material2/src/dev-app/virtual-scroll/BUILD.bazel:5:1: Couldn't build file src/dev-app/virtual-scroll/virtual-scroll-demo-module.ngfactory.js: Compiling Angular templates (ngtsc - devmode) //src/dev-app/virtual-scroll:virtual-scroll failed (Exit 1)
src/dev-app/virtual-scroll/virtual-scroll-demo.html(90,8): error TS2322: Type 'number[] | null' is not assignable to type 'number[] | DataSource<number> | Observable<number[]> | Iterable<number> | undefined'.
  Type 'null' is not assignable to type 'number[] | DataSource<number> | Observable<number[]> | Iterable<number> | undefined'.

A fix similar to what was done for ngForOf in PR angular/angular#31371 is also needed for cdkVirtualForOf.

Workaround

Change

<div *cdkVirtualFor="let size of observableData | async; let i = index" class="demo-item [style.height.px]="size">

to

<div *cdkVirtualFor="let size of (observableData | async)!; let i = index" class="demo-item" [style.height.px]="size">

Environment

  • Angular: 9.0.0-next.10
  • CDK/Material: master
  • Browser(s): N/A
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS Mojave

Metadata

Metadata

Assignees

Labels

P1Impacts a large percentage of users; if a workaround exists it is partial or overly painful

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions