Openlayers 4.6.5和Angular 6无法删除像素处绘制的形状

import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Draw from 'ol/interaction/Draw';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map: Map;
  draw: Draw;

  ngOnInit() {
    const raster = new TileLayer({
      source: new OSM()
    });

    const source = new VectorSource();
    const vector = new VectorLayer({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: '#ffcc33',
          width: 2
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#ffcc33'
          })
        })
      })
    });

    this.map = new Map({
      layers: [raster, vector],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

    this.draw = new Draw({
      source: source,
      type: 'Polygon' // 可以是Point、LineString、Polygon等
    });

    this.map.addInteraction(this.draw);
  }

  deleteShape() {
    const source = this.draw.getSource();
    const features = source.getFeatures();
    features.forEach(feature => {
      source.removeFeature(feature);
    });
  }
}