javascript - 无法读取未定义的属性“nativeElement”（Ionic 3 和 Angular 5）

问题描述

我在 Ionic 3 应用程序上使用 @ViewChild() 时遇到问题。事实上，我希望能够在页面的第二部分显示地图。我有以下错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined

这是我的 HTML 代码：

<ion-header>
    <ion-navbar>
        <ion-title>Favoris</ion-title>
    </ion-navbar>
    <div padding>
        <ion-segment [(ngModel)]="view">
            <ion-segment-button value="list">
                Liste
            </ion-segment-button>
            <ion-segment-button value="map">
                Carte
            </ion-segment-button>
        </ion-segment>
    </div>
</ion-header>

<ion-content>
    <div [ngSwitch]="view">
        <div *ngSwitchCase="'list'">
            <ion-card *ngFor="let favorite of favorites">
                <img src="{{ favorite.photo }}" />
                <ion-card-content>
                    <ion-card-title>
                        {{ favorite.name }}
                        <ion-icon name="trash" class="icon-remove" (click)="removeFavorite(favorite.id_place)"></ion-icon>
                    </ion-card-title>
                    <p>
                        {{ favorite.address }}
                    </p>
                </ion-card-content>
            </ion-card>
        </div>

        <div *ngSwitchCase="'map'">
            <div #map id="map" class="map"></div>
        </div>
    </div>
</ion-content>

这是我的 TS 代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { AngularFireAuth } from "angularfire2/auth";

import { GoogleMapsProvider } from './../../providers/google-maps/google-maps';

declare var google: any;

@IonicPage()
@Component({
    selector: 'page-favorite',
    templateUrl: 'favorite.html'
})
export class FavoritePage {
    @ViewChild('map') mapRef: ElementRef;
    map: any;
    lat: string;
    lng: string;
    view: string = "list";
    /**
     * a MODIFIER AVEC l'API
     */
    favorites: { id_place: string, name: string, photo: string, address: string }[] = [
        { "id_place" : "9054b4cc53b207424db12d23e1b34b3ae0cfe9c0",  "name": "Café Madeleine Paris", "photo": "https://lh3.googleusercontent.com/p/AF1QipMkeDY6tB5bQFEPhy1Ah4HR-2Oh7CjO_td-BbDY=s1600-w400", "address": "1 Rue Tronchet, Paris" },
        { "id_place" : "cf49d5cbc84ecbe0388ef93eb80aa18f9db3ffa9", "name": "Cafe Kitsune", "photo": "https://lh3.googleusercontent.com/p/AF1QipNk8GqMTGNo-QF_QwdakFaNvoGwi11tHmY-969p=s1600-w400", "address": "1 Rue Tronchet, Paris" },
        { "id_place" : "b8c6ecc9f9e047dd428f3994c537c3f877ba0e30", "name": "Café des Abattoirs", "photo": "https://lh3.googleusercontent.com/p/AF1QipPRKYf0L3uEYzPee5Y7uUBa15Q_7WWtUTWSHvqd=s1600-w400", "address": "10 Rue Gomboust, Paris" },
    ];


    constructor(
        private aFAuth: AngularFireAuth,
        public navCtrl: NavController,
        public GoogleMaps: GoogleMapsProvider,
    ) {

    }


    ionViewDidLoad() {
        this.showMapWithMarker();
    }

    showMapWithMarker() {
        const location = new google.maps.LatLng(-25.363, 131.044);
        const options = {
            center: location,
            zoom: 20
        };
        this.map = new google.maps.Map(this.mapRef.nativeElement, options);

        var marker = new google.maps.Marker({
            position: location,
            title: 'hello world',
            animation: google.maps.Animation.DROP
        });

        // To add the marker to the map, call setMap();
        marker.setMap(this.map);
    }

    removeFavorite(id_place) {
        console.log('Remove favorite : ', id_place)
    }
}

你知道我该如何解决这个问题吗？

预先感谢您的帮助。

标签： javascriptangulartypescriptionic-frameworkviewchild

javascript - 无法读取未定义的属性“nativeElement”（Ionic 3 和 Angular 5）

问题描述

解决方案

推荐阅读