标签: angular7

我正在尝试从数据源获取使用布尔值的材质树。我正在对输入进行过滤 datasource.data ，这会导致每次用户输入内容时树都会折叠。为了避免这种情况，我想在特定行中使用布尔值来展开/折叠材质树。我已经使用材质表成功完成了此操作，但无法使其与树一起使用。这是我到目前为止所拥有的：

HTML 文件：

<mat-tree [dataSource]="nestedDataSource" [treeControl]="nestedTreeControl" class="example-tree">
  <mat-tree-node *matTreeNodeDef="let node">
    <li class="mat-tree-node">
      <button mat-icon-button disabled></button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasNestedChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button
                [attr.aria-label]="'toggle ' + node.name"
                click="changeState(node)">
          <mat-icon class="mat-icon-rtl-mirror">
            {{node.expanded ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
        {{node.name}} ({{node.expanded}})
      </div>
      <ul [class.example-tree-invisible]="node.expanded">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

TS 文件：

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component, Injectable} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';
import {BehaviorSubject} from 'rxjs';

/**
 * Json node data with …

我试图使用堆栈上这个答案ngOninit()中的以下内容来获取组件完全加载到 dom 中所需的时间：

ngOnInit()
{
    var time = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart
    console.log(time)
}

结果是这样的：

-1544706869570

我用了ngAfterViewInit()：

ngAfterViewInit(){
    var time = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart
    console.log(time)
  }

结果是一样的。

如何将其转换为秒，是否有更好的解决方案来计算角度 7 中的组件负载？

昨天我的项目运行良好，但今天安装ngx-pagination模块后遇到错误：

src/app/views/dashboard/step1/step1.component.ts(1,23) 中的错误：错误 TS2688：找不到“@types/googlemaps”的类型定义文件。src/app/views/dashboard/step1/step1.component.ts(187,34)：错误 TS2304：找不到名称“google”。src/app/views/dashboard/step1/step1.component.ts(190,29)：错误 TS2304：找不到名称“google”。src/app/views/dashboard/step1/step1.component.ts(193,26)：错误 TS2503：找不到命名空间“google”。src/app/views/job/quick-job-form/quick-job-form.component.ts(1,23)：错误 TS2688：找不到“@types/googlemaps”的类型定义文件。src/app/views/job/quick-job-form/quick-job-form.component.ts(182,34)：错误 TS2304：找不到名称“google”。src/app/views/job/quick-job-form/quick-job-form.component.ts(188,29)：错误 TS2304：找不到名称“google”。src/app/views/job/quick-job-form/quick-job-form.component.ts(191,26)：错误 TS2503：找不到命名空间“google”。src/app/views/job/quick-job-form/quick-job-form.component.ts(336,24)：错误 TS2304：找不到名称“google”。

请帮我。

我正在使用 Angular7 和 Botstrap4。尝试在我的应用程序中添加导航栏，当导航栏折叠时，切换按钮不起作用。

我不想添加 ng-bootstrap，只想添加 bootstrap4。

这是我的代码

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">{{title}}</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" routerLink="home">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="about">About Us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="contact">Contact Us</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

我需要添加自定义数据属性来选择选项。我想要它，因为在更改时我想根据所选属性（而不是值）触发操作

这是我正在使用的代码

<select (domChange)="onListUpdate($event)" formControlName="region" id="region" class="selectric form-control">
    <option code="" value="-1">{{ 'select_country' | translate }}</option>
    <option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>
</select>

例如，当我为数据属性赋予静态值时，它可以工作，以下工作没有任何问题（注意数据 isocode 具有静态值）

<option data-isocode="abc" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

但是，当我尝试在 data-isocode 中使用变量时

<option data-isocode="{{region.iso_code}}" value="{{region.id}}" *ngFor="let region of regions">{{region.name['en']}}</option>

它引发了我以下错误

Can't bind to 'isocode' since it isn't a known property of 'option'

如何使用 Angular 传递数据属性（如 jQuery）并使用 FormBuilder 获取值？

您好，我尝试将 signalR 与 asp.net mvc 5 和 Angular 7 一起使用，但无法在集线器之间建立连接

这是我的代码

角7

import { Component, OnInit } from '@angular/core';
import { HubConnection, HubConnectionBuilder } from '@aspnet/signalr';
import * as $ from '@aspnet/signalr'

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

export class AdminDashboardComponent implements OnInit {
private _hubConnection: HubConnection;
constructor() {
this._hubConnection = new HubConnectionBuilder()
  .withUrl("http://localhost:4200/hub/cashnet", {
    skipNegotiation: true,
    transport: $.HttpTransportType.WebSockets
  })
  .configureLogging($.LogLevel.Information)
  .build();

this._hubConnection.start().then(() => {
  console.log('Hub connection started');
}).catch(err => {
  console.log('Error while establishing connection :(')
});

this._hubConnection.on('sendMessage', …

我在 Angular 7 中使用sheetjs。并且我从我的json 导出excel。但 Excel 将我的日期转换为 02/29/2019 格式。但是，我要发送“29.02.2019”。我以字符串形式发送，Excel 仍在转换。我还发送“29.02.2019”。通过增加 ”。” 日期结束时的字符，但它仍然转换为“02/29/2019”。。如何实现按我的格式显示？

import * as XLSX from 'xlsx';

exportExcelFromJson(jsonData): void {
    const ws: XLSX.WorkSheet = XLSX.utils.json_to_sheet(jsonData);
    const wb: XLSX.WorkBook = XLSX.utils.book_new();

    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.writeFile(wb, 'MyExcel.xlsx');
}

如何给div添加分页功能。

应用程序组件.html

<div>

 <div *ngFor="let clg of colleges$">
  <h3>{{clg.name}}</h3>
 </div>

 <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 
 100]"></mat-paginator>

</div>

我正在尝试在多个页面中添加自定义组件。

• 我创建了我的页面：ionic g pages name
• 我创建了我的组件：ionic g component name

此时我只是尝试这个：

<ion-content>
    <app-menu-button></app-menu-button>
</ion-content>

app-menu-button 是组件选择器

我收到此错误：1. If 'app-menu-button' is an Angular component, then verify that it is part of this module.

我尝试在我的应用程序模块文件中添加以下内容：

exports: [
    MenuButtonComponent
  ]

但这不起作用。

我的目标是在多个页面中显示该组件。

谢谢，

嘿，我正在尝试设置一个 Angular Material SideNav，在进行基本布局设置后，我注意到当 SideNav 打开（未结束）时，右侧有一条白线。当在开发工具中查看它时，它比我设置的宽度小 1 像素。

所以 mat-sidenav 宽度比我在 CSS 中设置的少 1 像素。我将其设置为 240，结果返回为 239，这使得它比预期小 1 像素，并暴露了其下方的白色。请参阅下面的屏幕截图。

我创建了一个 stackblitz 来重现这个问题。

https://stackblitz.com/edit/angular-skcmty?embed=1&file=app/sidenav-overview-example.html