agm-添加其他点时不更新多边形

import { Component } from '@angular/core';
import { PolygonManager } from '@agm/core';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent {
  polygonPaths: Array<google.maps.LatLngLiteral> = []; // 存储多边形点的数组
  polygonOptions: google.maps.PolygonOptions = { editable: false }; // 多边形的选项
  polygon: PolygonManager; // 多边形对象

  constructor() {}

  mapClick(event: google.maps.MouseEvent) {
    const clickedPoint = { lat: event.latLng.lat(), lng: event.latLng.lng() };
    this.polygonPaths.push(clickedPoint);
    this.polygon.setPath(this.polygonPaths);
  }
}

<agm-map [latitude]="51.678418" [longitude]="7.809007" [zoom]="14">
  <agm-polygon [paths]="polygonPaths" [options]="polygonOptions" (mapClick)="mapClick($event)"></agm-polygon>
</agm-map>