Невозможно связать с 'ngIF', так как это не известное свойство 'ion-item'

Question

Мне нужно использовать * ngIF внутри кода моего проекта ionic4, нашел несколько ответов, но ни один не работает, поскольку ни один не нацелен на ionic 4 и angular 7.

, и я попытался импортировать imports: [CommonModule]часть, но это не сработало вообще.

Вот код, который я использую в .html файле:

<ion-app>
    <ion-split-pane>
        <ion-menu>
            <ion-header>
                <ion-toolbar color="medium">
                    <ion-title>Menu</ion-title>
                </ion-toolbar>
            </ion-header>
            <ion-content background="medium">
                <ion-list>
                    <ion-menu-toggle auto-hide="false">
                        <ion-item routerLink='/home'>
                            <ion-icon color="light" slot="start" name="home"></ion-icon>
                            <ion-label color="light">
                                Home
                            </ion-label>
                        </ion-item>
                        <ion-item routerLink='/list'>
                            <ion-icon color="light" slot="start" name="woman"></ion-icon>
                            <ion-label color="light">
                                Buy / Rent a Dress
                            </ion-label>
                        </ion-item>
                        <ion-item routerLink='/add-dress'>
                            <ion-icon color="light" slot="start" name="add"></ion-icon>
                            <ion-label color="light">
                                Add Dress for Sale/Rental
                            </ion-label>
                        </ion-item>
                        <ion-item routerLink='/create-account'>
                            <ion-icon color="light" slot="start" name="person-add"></ion-icon>
                            <ion-label color="light">
                                Register New Account
                            </ion-label>
                        </ion-item>
                        <ion-item routerLink='/login' *ngIF='authenticatedState()'>
                            <ion-icon color="light" slot="start" name="log-in"></ion-icon>
                            <ion-label color="light">
                                Login to your account
                            </ion-label>
                        </ion-item>
                    </ion-menu-toggle>
                </ion-list>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

, и у меня есть этот код в моем файле .ts:

import {Component} from '@angular/core';
import { Storage } from '@ionic/storage';
import {Platform} from '@ionic/angular';
import {SplashScreen} from '@ionic-native/splash-screen/ngx';
import {StatusBar} from '@ionic-native/status-bar/ngx';
import { AuthServiceService } from './auth-service.service';

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['main.scss'],
})
export class AppComponent {

    constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private storage: Storage,
        private authService: AuthServiceService,
    ) {
        this.initializeApp();
    }
    public appPages = [
        {
            title: 'Home',
            url: '/home',
            icon: 'home'
        },
        {
            title: 'Buy / Rent a Dress',
            url: '/list',
            icon: 'woman'
        },
        {
            title: 'Add Dress for Sale/Rental',
            url: '/add-dress',
            icon: 'add'
        },
        {
            title: 'Register New Account',
            url: '/create-account',
            icon: 'person-add'
        },
        {
            title: 'Login to your account',
            url: '/login',
            icon: 'log-in'
        },

    ];

    initializeApp() {
        this.platform.ready().then(() => {
            this.statusBar.styleDefault();
            this.splashScreen.hide();
        });
    }
    authenticatedState() {
        return this.authService.authenticated();
    }
}

И, как вы видите, * ngIf вызывает функцию, которая вызывает службу, которая возвращает True или False.

, которую я получаю, как:

Can't bind to 'ngIF' since it isn't a known property of 'ion-item'

Answer 1

должно быть * ngIf, а не * ngIF.Пожалуйста, просмотрите документацию по структурным директивам для обзора: https://angular.io/guide/structural-directives

<ion-item routerLink='/login' *ngIf='authenticatedState()'>