小编Séb*_*uet的帖子

stackblitz 中的问题案例

问题：如何实现mat-chipsin angular-material 在一行中（因为它们是标准的），但是当通过ngForin a mat-chip-list（在 a内mat-cell）循环时，它们被全部放置在单独的行上（参见“名称”列）。

目标：我希望将它排在每个旁边，直到由于宽度限制而中断（请参阅“重量”列）。

名称（例如 A、Z）的逗号分隔字符串元素的芯片应该在线上彼此相邻：

    const ELEMENT_DATA: PeriodicElement[] = [
      {position: 1, name: 'A, Z', weight: 1.0079, symbol: 'H'},
      {position: 2, name: 'this first, this second in line', weight: 4.0026, symbol: 'He'},
    ];

如

    <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef> Name </th>
        <td mat-cell *matCellDef="let element">
          <mat-chip-list class="no-wrap" *ngFor="let n of element.name.split(',')">
            <span class="nobreak">
              <mat-chip class="no-wrap">{{n}}</mat-chip>
            </span>
          </mat-chip-list>
        </td>
    </ng-container>

带有角度材料的可视化问题案例

我在 Angular 应用程序上使用传单，并显示了一些位于我从后端检索的坐标中的标记。

通过帖子末尾的代码，显示了标记，但它们不\xc2\xb4t将位置保持在不同的缩放级别上，如下图所示。

\n\n

标记应该位于红点上方，但它们位于另一个位置，并且当我放大或缩小时，它们似乎不保持\xc2\xb4t 的位置。看起来这些点位于具有不同参考系统的不同图层上。

我尝试将 mMarker.prototype.options.icon 保留在变量上并使用 addTo(map)，但它会抛出一个错误，指出“addTo”不是函数。

我能做些什么？谢谢

import { Component, OnInit } from \'@angular/core\';\nimport { MapService } from \'../../services/map.service\';\nimport { Router, ActivatedRoute, Params } from \'@angular/router\';\nimport { Map } from \'../../models/map\';\n\nimport { Icon, icon, Marker, marker } from \'leaflet\';\n\ndeclare let L;\nvar map;\n\n@Component({\n  selector: \'map-component\',\n  templateUrl: \'./map.component.html\',\n  styleUrls: [\'./map.component.css\']\n})\nexport class MapComponent implements OnInit {\n\n  private defaultIcon: Icon = icon({\n    iconUrl: \'assets/leaflet/marker-icon.png\',\n    shadowUrl: \'assets/leaflet/marker-shadow.png\'\n  });\n\n  public coordinates: [number];\n  constructor(\n    private …