Angular HTML 未显示 openlayers 的全部功能答案

【问题标题】：Angular HTML is not showing total features from openlayersAngular HTML 未显示 openlayers 的全部功能
【发布时间】：2020-12-08 04:19:59
【问题描述】：

我正在使用 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

我做错了什么？

【问题讨论】：

标签： angular openlayers openlayers-6 angular-openlayers

【解决方案1】：

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

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

另见answer

【讨论】：

是的，我已经添加了 BrowserModule 和 CommonModule 。我使用 *ngFor 而不是 *ngfor。问题是当我向变量添加静态值时（例如 features = [{id:1},{id:2}]) ，然后我可以看到 li 弹出值。但由于某些原因，它没有显示在我的函数中：/

【解决方案2】：

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

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

【讨论】：

试过 *ngIf .. 没有运气:(
您在检查 html 时看到了什么？