0

我正在使用 Angular 和 Openlayers 构建应用程序。我有一个在 zoomend 上工作的函数，它为我提供了当前框中的全部功能。我能够在 console.log 中获得输出，但不能在 HTML 中获得。

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'olnew';
  map;
  features 
  featlength
  ngOnInit(){
    this.map = new Map({
      target:'map',
      view: new View({
        projection:'EPSG:4326',
        center:[-94.18246640804583, 34.96110848844138],
        zoom:9
      }),
      layers:[
        new TileLayer({
        source: new OSM()
        })
      ]
    })
   
    this.map.on('moveend', function(e){
      var mapp = e.map
      console.log(mapp.getView().calculateExtent())
      fetch('http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp%3Astates&bbox='+mapp.getView().calculateExtent()[0]+','+mapp.getView().calculateExtent()[1]+','+mapp.getView().calculateExtent()[2]+','+mapp.getView().calculateExtent()[3]+'&outputFormat=application%2Fjson')
      .then(res => 
        res.json())
      .then(data => {
        console.log(data)
        this.features = data.features
        
        this.featlength = data.features.length
        console.log('feat lent ='+ this.featlength)
      })
      .catch(err => console.log(err))
    })
  }

}

app.component.html

<h3>{{ title }}</h3>

<div id="map" class="map"></div>

<div>Total feat = {{ featlength }}</div>
<ul>
  <li *ngFor="let feat of features">
    {{ feat.id }}
  </li>
</ul>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CommonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我也添加了 browserModule 和 CommonModule

在此处输入图像描述

我究竟做错了什么？

4

2 回答 2

1

如果控制台顶部有错误，您会看到错误吗？Can't bind to 'ngForOf' since it isn't a known property of 'li'- 这应该被处理，并且可能会解决页面其余部分的问题。

您需要做的是确保BrowserModule在应用程序的主模块中导入，并CommonModule在子模块中导入（找到此组件的位置）

另请参阅此答案

于 2020-12-08T05:26:44.340 回答
0

这很可能是由于在将值分配给变量之前渲染了 html 并且在分配值后没有更新。向类似的情况添加 ngIf 条件应该可以解决此问题。

<div *ngIf="featlength ">Total feat = {{ featlength }}</div>

于 2020-12-08T06:24:11.120 回答