Angular HTML 未顯示 openlayers 的全部功能

Question

我正在使用 Angular 和 Openlayers 構建應用程序。 我有一個 function 在 zoomend 上工作，它為我提供了當前框中的全部功能。 我可以在 console.log 中獲得 output 但在 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

我究竟做錯了什么？

Answer 1

如果控制台頂部有錯誤，您會看到錯誤嗎？ Can't bind to 'ngForOf' since it isn't a known property of 'li' - 這應該會得到處理，並且可能會修復頁面的 rest 的問題。

您需要做的是確保在應用程序的主模塊中導入BrowserModule ，並在子模塊中導入CommonModule （該組件所在的位置）

另請參閱此答案

Answer 2

這很可能是由於 html 在將值分配給變量之前渲染而在分配值后未更新。 向類似的情況添加 ngIf 條件應該可以解決此問題。

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