Question

在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)
    }
}

您知道我该如何解决此问题？

预先感谢您的帮助。

Answer 1

view的初始值与检查是否渲染地图div的大小写不匹配。

view: string = "list"; // it should be "map"

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

Answer 2

1。加载页面时，视图的值为'list'，元素映射无法在页面上呈现。因此mapRef为null，

2。问题是ngSwitchCase，当ngSwitch的值与ngSwitchCase不匹配时，该元素将不会呈现。

3。也许您可以使用指令[hidden] <div [hidden]="view!='list'"> </div> <div [hidden]="view!='map'"> </div>

无法读取未定义的属性“ nativeElement”（离子3和角度5）

2 个答案: