Question

我需要在ionic4项目的代码中使用* ngIF，找到了一些答案，但都没有用，因为没有一个针对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()'>

无法绑定到“ ngIF”，因为它不是“ ion-item”的已知属性

1 个答案: