Angular 6 检测图表的变化

Question

我正在使用 Angular 6 和 Leaflet 进行映射。我想创建一个交互式地图，根据我在表单中选择的属性更改视图。

我已经设置了在 ngOninit 中绘制图形的条件，但该条件仅在应用程序加载时有效，而我希望它在每次修改表单时都有效。

有人可以帮我上赛道吗？

组件.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{}
});    
}
}

组件.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>

Answer 1

你应该可以这样做：

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

这假设您已经创建了一个FormGroup 并在其中添加了FormControls。你已经在你的组件文件中导入了这些，所以我想你会使用它们。

Reactive Forms

Form Group