小编mne*_*ann的帖子

使用指令隐藏角材料垫标签

我正在使用角材料选项卡,我想使用指令动态隐藏选项卡元素。

html模板

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div>
Run Code Online (Sandbox Code Playgroud)

HideMe 指示

<mat-tab-group>
  <!-- how to hide this using directive? -->
  <mat-tab appHideMe label="First"> Content 1 </mat-tab>
  <!-- like this -->
  <mat-tab *ngIf="false" label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

<div appHideMe>
  hidden
</div>
<div>
  visible
</div> …
Run Code Online (Sandbox Code Playgroud)

html angular-material2 angular

5
推荐指数
2
解决办法
2万
查看次数

Angular 代理配置没有任何效果

我有一个 REST API 后端运行在http://localhost:8000/api,我的 Angular 13 应用程序运行在http://localhost:4200。当然,当我尝试查询该后端的任何端点时,我会收到 CORS 错误。

所以我尝试设置 Angular 代理。src/proxy.conf.json我添加了包含以下内容的文件:

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug"
  }
}
Run Code Online (Sandbox Code Playgroud)

之后,我添加了以下内容angular.json

"serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "proxyConfig": "./src/proxy.conf.json"
      },
      "configurations": {
        "production": {
          "browserTarget": "photon:build:production"
        },
        "development": {
          "browserTarget": "photon:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
Run Code Online (Sandbox Code Playgroud)

(我还在“development”配置下添加了proxyConfig节点,但没有改变。)

现在,当我运行npm start触发时ng serve,我在控制台输出中根本看不到代理已设置 - 并且 API 请求仍然收到 CORS 错误。我相信应该有一些控制台输出显示代理已设置,如下所示:

Proxy created: /api -> http://localhost:8080 (我在这里看到了这个。)

我不知道为什么这不起作用,这应该很简单。

编辑:这是请求函数本身。

      get(url: …
Run Code Online (Sandbox Code Playgroud)

proxy cors angular

4
推荐指数
1
解决办法
2万
查看次数

导入扩展类的模块

在寻找在Leaflet.js 中旋转标记的方法时,我找到了模块Leaflet-rotatedmarker。我是通过 npm 安装的,但现在我不知道如何实际使用它。

根据自述文件,它只扩展了现有的Marker类。据我了解,我现在应该可以调用Marker.setRotationAngle(),但该函数不存在。Marker从导入leaflet-rotatedmarker也不起作用。

如何正确导入扩展类或如何使用模块中的功能/属性扩展现有的传单类?谢谢。

我说的是import { XYZ } from 'leaflet-rotatedmarker'声明。

编辑:

如果我尝试rotationAngle在构造函数中设置它,它也不起作用:

const marker = L.marker([tmpAgv.Pos.X, tmpAgv.Pos.Y], { alt: tmpAgv.Id }, {rotationAngle: 180}).addTo(this.mapObject);
Run Code Online (Sandbox Code Playgroud)

标记仍未旋转。

leaflet node-modules typescript angular

2
推荐指数
1
解决办法
1313
查看次数

取消订阅仅在必要时发出一次的可观察计时器?

在我的程序中,我有一些timer(1000).subscribe()实例以及一些timer(1000, 1000).subscribe()部分。

我遇到了一些内存泄漏问题,想知道是否可以通过取消订阅计时器来缓解这些问题。取消订阅循环计时器似乎是直接且必要的,但我是否还必须取消订阅仅发出一次的计时器?

我的问题的第二部分是是否有更好的方法来取消订阅发射计时器而不是将其放入变量中,如下所示:

const myTimer = timer(1000).subscribe(() => {
    myTimer.unsubscribe();
});
Run Code Online (Sandbox Code Playgroud)

谢谢!

node.js observable rxjs typescript rxjs-observables

2
推荐指数
1
解决办法
732
查看次数

角度材料扩展面板内的下拉菜单被切断

我在 Angular Material 扩展面板中遇到了这个问题。部分分页下拉菜单被切断。如何使下拉菜单与扩展面板的末端重叠?我尝试z-index过但没有成功。

Material Accordion 内部包含三个面板。

具有三个面板的材料扩展手风琴。

切断下拉菜单。

这是相关代码:

<mat-accordion class="example-headers-align" multi>
            <mat-expansion-panel hideToggle>
              <mat-expansion-panel-header>
                <mat-panel-title>
                Title
                </mat-panel-title>
              </mat-expansion-panel-header>
              <p-table
                #dt
                [columns]="cols"
                [value]="tableDataSummary"
                [paginator]="false"
                scrollable="true"
                sortMode="multiple"
                [resizableColumns]="true"
                [rowHover]="true"
                [rows]="10"
                scrollable="true"
                resizableColumns="true"
                [rowsPerPageOptions]="[10,100]"
                appendTo="body"
                [paginator]="true"
              >
                <ng-template pTemplate="header" let-columns>
                  <tr>
                    <th pSortableColumn="col" *ngFor="let col of columns">
                      {{col.header}}
                    </th>
                  </tr>
                  <tr>
                    <th
                      *ngFor="let col of columns"
                      [ngSwitch]="col.field"
                      [pSortableColumn]="col.field"
                    >
                      <p-sortIcon [field]="'col.field'"></p-sortIcon>
                    </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <tr [pSelectableRow]="rowData">
                    <td
                      *ngFor="let col of columns"
                      style="line-break: anywhere;"
                    >
                      <span
                        *ngIf="col.field === …
Run Code Online (Sandbox Code Playgroud)

html angular-material primeng-datatable

2
推荐指数
1
解决办法
1475
查看次数