0
Ionic 3을 사용 중이며 Google Maps 플러그인을 사용하고 있습니다. 두 페이지, 목록 및지도가 있습니다. 두보기 모두에 동일한 객체를 표시하고 목록 항목이나 마커 (정보 창)를 클릭하면 선택한 객체를 평가할 수있는 객체의 세부 정보 페이지가 열립니다.Ionic3/Angular4 : Google지도에서 클릭 이벤트가 발생하면 양방향 데이터 바인딩이 작동을 멈 춥니 다.
어쨌든 목록을 통해 세부 정보 페이지를 열면 모든 것이 제대로 작동하지만 맵 마커를 통해 세부 정보 페이지를 열면 양방향 데이터 바인딩이 작동하지 않습니다. 아래 코드에서 등급 대화 상자에 <rating-input> 구성 요소가 있습니다. 이것이 작동하지 않는 코드입니다.
간단한 입력 텍스트를 사용하여 실제로 양방향 데이터 바인딩인지 아니면 내 구성 요소인지 확인하려고했습니다. 간단한 텍스트 상자를 사용하여 데이터 바인딩이 작동하지 않았습니다.
//adding the markers to the map and adding the clicklisteners
putMarkersForMarkets(markets: Christmasmarket[]) {
markets.forEach(market => {
let isOpen = this.openinghoursService.isOpenAt(market, new Date());
this.map.addMarker({
title: market.name,
icon: isOpen ? 'green' : 'red',
animation: 'DROP',
position: {
lat: market.position.latitude,
lng: market.position.longitude
}
}).then(marker => {
marker.on(GoogleMapsEvent.INFO_CLICK)
.subscribe(() => {
this.onClickMarket(market);
});
});;
});
}
onClickMarket(market: Christmasmarket) {
this.map.setVisible(false);
this.map.setClickable(false);
this.app.getRootNav().push(MarketDetailPage, { data: market });
}
등급 - 팝업 HTML :
<ion-header>
<ion-navbar color="primary">
<ion-title>{{'RATINGDIALOG.TITLE' | translate}}</ion-title>
<ion-buttons end>
<button ion-button icon-only (click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<form #form="ngForm">
<b>{{'RATINGDIALOG.HEADERMARKET' | translate}}</b><br>
<rating-input [(rating)]="rating" [texts]="ratingTexts" name="rating"></rating-input>
<b>{{'RATINGDIALOG.HEADERPRICE' | translate}}</b><br>
<rating-input [(rating)]="ratingPrice" symbol="logo-euro" [texts]="ratingPriceTexts"></rating-input>
<input type="text" [(value)]="meinval">
{{meinval}}
</form>
</ion-content>
<ion-footer>
<ion-row>
<ion-col>
<button [disabled]="rating == 0 || ratingPrice == 0" ion-button full color="secondary" (click)="saveRating()">
{{'RATINGDIALOG.SAVE' | translate}}
</button>
</ion-col>
<ion-col>
<button ion-button full color="secondary" (click)="dismiss()">{{'RATINGDIALOG.CANCEL' | translate}}
</button>
</ion-col>
</ion-row>
</ion-footer>
평점 팝업 타이프 :
import { Component, OnInit } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
import { Christmasmarket } from "../../../model/christmasmarket";
import { ChristmasMarketService } from "../../../services/christmasmarketservice";
import { TranslateService } from "@ngx-translate/core";
@Component({
selector: 'rating-dialog',
templateUrl: 'ratingdialog.component.html'
})
export class RatingDialogComponent implements OnInit {
rating: number;
ratingPrice: number;
ratingTexts: Array<string>;
ratingPriceTexts: Array<string>;
market: Christmasmarket;
meinval: String;
constructor(
private viewCtrl: ViewController,
private navParams: NavParams,
private christmasMarketService: ChristmasMarketService,
private translate: TranslateService
) {
}
ngOnInit(): void {
this.translate.get('RATINGTEXTS').subscribe(res => {
this.ratingTexts = [];
this.ratingTexts.push(res['VALUE1']);
this.ratingTexts.push(res['VALUE2']);
this.ratingTexts.push(res['VALUE3']);
this.ratingTexts.push(res['VALUE4']);
this.ratingTexts.push(res['VALUE5']);
});
this.translate.get('RATINGPRICETEXTS').subscribe(res => {
this.ratingPriceTexts = [];
this.ratingPriceTexts.push(res['VALUE1']);
this.ratingPriceTexts.push(res['VALUE2']);
this.ratingPriceTexts.push(res['VALUE3']);
this.ratingPriceTexts.push(res['VALUE4']);
this.ratingPriceTexts.push(res['VALUE5']);
});
this.market = this.navParams.get('data');
this.rating = 0;
this.ratingPrice = 0;
this.christmasMarketService.findRatingOfMarket(this.market.id).then(rating => {
if (rating) {
this.rating = rating.rating;
this.ratingPrice = rating.ratingPrice;
}
}).catch(e => {
console.log(e);
});
}
dismiss() {
this.viewCtrl.dismiss(this.market);
}
saveRating() {
this.christmasMarketService.rateMarket(this.market.id, this.rating, this.ratingPrice).then(market => {
this.market = market;
this.dismiss();
console.log(market);
}).catch(e => {
console.log(e);
});
}
}
정격 입력 요소 HTML
<button ion-button icon-only clear="true" (click)="onClickRating(num)" *ngFor="let num of possibleRatings">
<ion-icon [name]="symbol" [color]="rating >= num ? 'black' : 'grey'"></ion-icon>
</button>
<p *ngIf="texts">
{{texts[rating-1]}}
</p>
<p *ngIf="!rating || rating == 0">
-
</p>
등급 입력 구성 요소 타이프 스크립트
"@ angle/core"의 {Component, Input, Output, EventEmitter} 가져 오기;
@Component({
selector: 'rating-input',
templateUrl: 'ratinginput.component.html'
})
export class RatingInputComponent{
@Input() @Output() rating: number;
@Input() symbol: string = 'star';
@Input() texts : Array<string>;
@Output() ratingChange = new EventEmitter();
possibleRatings: Array<number> = [1, 2, 3, 4, 5];
onClickRating(rating: number) {
this.rating = rating;
this.ratingChange.emit(this.rating);
}
}
예, 작동합니다! 고마워요! –