typescript - Bruk av materialize-css (v 1.0.0) i Angular 5 fungerer ikke

så jeg prøvde å bruke løsningen herfra: https://stackoverflow.com/a/48058897/9642
Men det fungerte ikke. Jeg bruker Angular med Typescript, selvfølgelig.

Min Typescript-klasse:

import { Component, OnInit, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import * as M from 'materialize-css/dist/js/materialize';

@Component({
    selector: 'app-list-nav',
    templateUrl: './list-nav.component.html',
    styleUrls: ['./list-nav.component.css']
})
export class ListNavComponent implements OnInit, AfterViewInit {

    @ViewChild('collapsible') elCollapsible: ElementRef;

    constructor() { }

    ngOnInit() {

    }

    ngAfterViewInit() {
        const instanceCollapsible = new M.Collapsible(this.elCollapsible.nativeElement, {});
    }

}

På HTML-delen har elementet ID-en 'collabsible' og klassen 'collabsible'. Og likevel får jeg denne feilen:

 ng:///AppModule/ContentComponent.ngfactory.js:12 ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at ListNavComponent.ngAfterViewInit (webpack-internal:///../../../../../src/app/list-nav/list-nav.component.ts:20)
    at callProviderLifecycles (webpack-internal:///../../../core/esm5/core.js:12922)
    at callElementProvidersLifecycles (webpack-internal:///../../../core/esm5/core.js:12889)
    at callLifecycleHooksChildrenFirst (webpack-internal:///../../../core/esm5/core.js:12872)
    at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14027)
    at callViewAction (webpack-internal:///../../../core/esm5/core.js:14369)
    at execComponentViewsAction (webpack-internal:///../../../core/esm5/core.js:14301)
    at checkAndUpdateView (webpack-internal:///../../../core/esm5/core.js:14024)
    at callViewAction (webpack-internal:///../../../core/esm5/core.js:14369)
    at execEmbeddedViewsAction (webpack-internal:///../../../core/esm5/core.js:14327)

Svar #1

Du kan ikke spørr med@ViewChild etter CSS-id. Du må legge til malvariabelen.

Så i stedet for

<div id="collapsible"></div>

Du må gjøre

<div #collapsible></div>

Relaterte artikler