Angular 6 обнаруживает изменения в графике - PullRequest
Новая
       18

Angular 6 обнаруживает изменения в графике

0 голосов
/ 04 сентября 2018

Iam работает в угловых 6 и листовка для картографирования. Я хочу создать интерактивную карту, которая меняет вид в зависимости от свойства, выбранного в моей форме.

Я установил условие для рисования графика в ngOninit, но это условие работает только при загрузке приложения, тогда как я хочу, чтобы оно работало каждый раз, когда форма изменяется.

Может кто-нибудь поставить меня на трек, пожалуйста?

Component.ts 

export class GeoComponent implements OnInit, OnChanges {

    searchForm: FormGroup;
    geosToDisplay;
    topping: string;
    toppings = new FormControl( [''];
    toppingList: string[] = [
     'Evaluation de la douleur',
     'Evaluation psychologique'
      ];  

constructor(private geoService: GeoService, private router: Router, private database: AngularFireDatabase,private formBuilder: FormBuilder,private matIconRegistry: MatIconRegistry) { }           

ngOnInit() { 
this.geosToDisplay = this.geoService.getGeos();

this.searchForm.valueChanges.subscribe((value) => {
let val =this.toppings.value;
this.toppings.valueChanges.subscribe(val=>console.log(val));
console.log(val);

const myfrugalmap = L.map('frugalmap').setView([47.482019, -0.554399], 7);

L.tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {attribution: 'SoS Map' }).addTo(myfrugalmap);

const myIcon = L.icon({
 iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png',
 iconSize: [ 25, 41 ],
 iconAnchor: [ 13, 41 ],
});

L.marker([ 47.210804, -1.554723 ], {icon: myIcon}).bindPopup('CHU Nantes').addTo(myfrugalmap);

if (val.includes('Evaluation de la douleur')) 
{ L.marker([ 47.482019, -0.554399  ], {icon: myIcon}).bindPopup('CHU Angers').addTo(myfrugalmap);}
else{}
});    
}
}

Component.HTML 

    <mat-form-field  appearance="outline" style="width:100%" >
      <mat-label>Rechercher un soin de support</mat-label>
      <mat-select placeholder="Toppings" [formControl]="toppings" multiple Z>
        <button 
                  mat-raised-button 
                  class="mat-primary fill text-sm" 
                  (click)="selectAll()">
                  Tout sélectionner
                </button>&nbsp;&nbsp;
                <button 
                  mat-raised-button 
                  class="mat-warn fill text-sm" 
                  (click)="deselectAll()">
                  Tout désélectionner
                </button>
        <mat-option *ngFor="let topping of toppingList" [value]="topping" >{{topping}}</mat-option>
      </mat-select>
    </mat-form-field>
    <div id="frugalmap">

    </div>

1 Ответ

0 голосов
/ 04 сентября 2018

Вы должны быть в состоянии сделать это: 

this.someFormGroup.valueChanges.subscribe((value) => {
  // Do something
});

Предполагается, что вы создали FormGroup и добавили FormControl s к нему. Они импортированы в ваш файл компонента, поэтому я думаю, что вы будете их использовать.

Реактивные формы

Группа форм

...