小编cpe*_*die的帖子

我正在尝试将 flex-layout 添加到 angular 应用程序，但是当我这样做并尝试使用它时，应用程序会中断。我已经安装

npm i @angular/flex-layout @angular/cdk

然后在 app.module.ts 中导入

import { FlexLayoutModule } from '@angular/flex-layout';

import [ FlexLayoutModule ]

我还将打字稿升级到最新版本

npm i typescript@latest

但是当应用程序尝试编译时，我收到各种错误：

ERROR in node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An accessor cannot be declared in an ambient context.

24     protected get parentElement(): HTMLElement | null;
                 ~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:26:19 - error TS1086: An accessor cannot be declared in an ambient context.

26     protected get nativeElement(): HTMLElement;
                 ~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:28:9 - error TS1086: An accessor cannot be declared in an …

我正在尝试使用角度大学提供的优秀示例来实现角度数据表。但我坚持实现我的数据源。这是我的数据源：

import { Aircraft } from '../shared/aircraft';
import { AircraftInfoService } from './aircraft-info.service';
import { BehaviorSubject } from 'rxjs';
import { CollectionViewer, DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/catchError';
import 'rxjs/add/operator/finalize';

export class allAircraftInfoDataSource implements DataSource<Aircraft> {

  private aircraftDBSubject = new BehaviorSubject<Aircraft[]>([]);
  private loadingSubject = new BehaviorSubject<boolean>(false);

  public loading$ = this.loadingSubject.asObservable();

  constructor(private aircraftInfoService: AircraftInfoService) {}

  connect(collectionViewer: CollectionViewer): Observable<Aircraft[]> {
      return this.aircraftDBSubject.asObservable();
  }

  disconnect(collectionViewer: CollectionViewer): void {
      this.aircraftDBSubject.complete();
      this.loadingSubject.complete();
  }

  getAircraft() {

      this.loadingSubject.next(true);

      this.aircraftInfoService.getAircraft().pipe(
        catchError(() => …

我的 Angular 应用程序中有一个 GeoJSON 特征集合，它是一个特征数组，每个特征都包含一个几何对象和属性对象。结构如下所示：

import { FeatureCollection, Feature } from 'geojson';

staticBreadcrumbs: GeoJSON.FeatureCollection<GeoJSON.Geometry>;

this.staticBreadcrumbs = {
    type : 'FeatureCollection',
    features: [
    {
        type: 'Feature',
        properties: {
            property1:  'property1',
            property2:  'property2'
        },
        geometry: {
            type: 'Point',
            coordinates: [-117.14024305343628, 32.81294345855713]
        }
    },
    {
        type: 'Feature',
        properties: {
        ...

我正在尝试为集合中的每个特征创建一个 mapboxgl 标记，并且需要从每个 GeoJSON 对象中获取坐标，编译器告诉我坐标不是特征的一部分。具体错误是：“几何”类型上不存在属性“坐标”。“GeometryCollection”类型不存在属性“坐标”。

console.log('this.staticBreadcrumbs.features[0]', this.staticBreadcrumbs.features[0]);

var marker = new Marker(el)
    .setLngLat([
        this.staticBreadcrumbs.features[0].geometry.coordinates[0],
        this.staticBreadcrumbs.features[0].geometry.coordinates[1]
    ])
    .addTo(this.map);

我的 console.log 显示

 this.staticBreadcrumbs.features[0]
 {type: "Feature", properties: {…}, geometry: {…}}
 1.  geometry:
     1.  coordinates: Array(2)
         1. …

我正在尝试让 ngx-mapbox-gl 在 angular 应用程序中显示地图，但该地图仅显示在 div 的一半中。玩过多种设置和 html 调整，但无法显示超过一半的地图。这是 map.component.html 文件：

    <div class="map" ng-view flex layout-fill style="height: 100%;border: solid 1px">
      <mgl-map
           [style]="'mapbox://styles/mapbox/streets-v9'"
           [zoom]="9"
           [center]="_center"
           (load)="loadMap($event)"
       >
       </mgl-map> 
     </div>

和 map.component.scss：

     @import 'mapbox-gl/dist/mapbox-gl.css';

     .mapboxgl-canvas {
       position: fixed !important;
       height: 100% !important;
}

map.component.ts：

 import { Component, OnInit, Input, Output, EventEmitter, OnChanges } from      '@angular/core';

 import { LngLat, Map } from 'mapbox-gl';

 @Component({
   selector: 'app-map',
   templateUrl: './map.component.html',
   styleUrls: ['./map.component.scss'],
 })

 export class DisplayMapComponent implements OnInit, OnChanges {
   map: Map;

   _center: LngLat;

   //refs …