Angular4 - `query(":enter") returned zero elements for dynamic data

Question

I want to create a really simple list animation in Angular4. But I have some problem. The stagger animation with static data works fine, but with dynamic data - won't work.

Here is my sample code:

app.component.html

<div class="items" [@listAnimation]>
    <div class="item" *ngFor="let item of items" [@listItem]>{{item}}</div>
</div>

my animation code in 'app.component.ts'

  animations: [
    trigger("listItem", [
      transition(":enter", [
        style({opacity: 0}),

        animate(".7s cubic-bezier(.4,0,.21,1)", keyframes([
          style({opacity: 1})
        ]))

      ]),
      transition(":leave", [
        animate(".5s cubic-bezier(.4,0,.21,1)", style({opacity: 0}))
      ])
    ]),
    trigger("listAnimation", [
      transition(":enter", [
        query(":enter", style({opacity: 0}), {optional: true}),
        query(":enter", stagger(100, [animateChild()]))
      ]),
      transition(":leave", [animateChild()])
    ])
  ]

'app.component.ts' main class

export class AppComponent implements OnInit {
  items = [];


  constructor(
    private ps: PostsService
  ) {}

  ngOnInit() {
    // animation for static array works fine
    this.items = ["asd", "Asd", "zxc"];


    // but animation for this data doesn't work
    this.ps.getPosts()
      .subscribe(res => this.items = res);
  }

If I want to animate dynamic list, application throws an error:

Unable to process animations due to the following failed trigger transitions
 @listAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

Do you know, how to solve this problem? Thanks for your all answers.

EDIT I forgot about sharing two code snippets. Here it is.

post.service.ts

@Injectable()
export class PostsService {

  constructor(
    private http: Http
  ) {}


  public getPosts(): Observable<any[]> {
    return this.http.get("https://jsonplaceholder.typicode.com/users")
      .map(res => res.json());
  }

}

package.json

{
  "name": "stagger-animation",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.1",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.2.4",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}