小编Dan*_*iel的帖子

如何使用ngGrid进行客户端分页?

如果设置了to 的enablePaging选项,则启用服务器端分页.ng-gridtrue

那客户端呢?我在文档中找不到任何暗示,但我无法想象ng-grid它也不支持客户端分页.

任何提示?

pagination angularjs ng-grid

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

Angular 2何时使用DI,提供程序或纯导入?

什么时候合适使用什么我有点困惑。

1.使用静态函数定义类,只需导入并使用导入的名称,然后使用函数

共享类:

export class SomeClass {
   static someFunction(){
      ...
   }
}
Run Code Online (Sandbox Code Playgroud)

使用导出类的类:

import { SomeClass } from './someclassstatic'
...
constructor(){
    SomeClass.someFunction()
}
Run Code Online (Sandbox Code Playgroud)

2.定义标准类,然后通过DI进行安装

共享类:

export class SomeClassDI {
   public someFunctionDI(){
      ...
   }
}
Run Code Online (Sandbox Code Playgroud)

使用导出类的类:

import { SomeClassDI } from './someclassdi'
...
constructor(private theclassdi:SomeClassDI){
    this.theclassdi.someFunction()
}
Run Code Online (Sandbox Code Playgroud)

3.定义标准类,然后在引导时挂载为提供程序

共享类:

export class SomeClassBS {
   public someFunctionBS(){
      ...
   }
}
Run Code Online (Sandbox Code Playgroud)

引导Angular2的类

import { SomeClassBS } from './someclassbs'
...
bootstrap(AppComponent, [SomeClassBS]);
Run Code Online (Sandbox Code Playgroud)

使用导出类的类:

??? I am not sure what can be the example here. 
Run Code Online (Sandbox Code Playgroud)

提供者的正确用法是什么?

import dependency-injection typescript angular

6
推荐指数
1
解决办法
1458
查看次数

从Angular 2开始的angular.element替代方案

我有一个Angular 1应用程序,我用过:

let css = ".toolbar-background {background-color: #D3300E !important;}";

angular.element(document.body).append(angular.element('<div><style>' + css + '</style></div>'));
Run Code Online (Sandbox Code Playgroud)

我正在将我的应用程序迁移到Angular 2,现在angular从Angular 2开始无法使用该对象.

如果有人可以建议在Angular 2中实现相同的方法,那将会非常有帮助.

dom typescript angular

6
推荐指数
1
解决办法
6329
查看次数

角度4:从不同的组件调用方法

我有2个兄弟组件,我在一个组件中做一个http请求,如果发生特定情况,它应该发出另一个http请求,写在另一个组件中.所以我应该能够在第一个组件中调用该方法.

这是第一个组成部分:

import { Component, OnInit, Inject } from '@angular/core';
import { Http } from '@angular/http';
import { SendCardComponent } from '../send-card/send-card.component';

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css'],
})

export class InputFieldComponent implements OnInit {

value = '';
output = '';
@Inject(SendCardComponent) saro: SendCardComponent;

constructor(private http : Http) { }
onEnter(value: string) { 

this.value = value;


this.http.post('http://localhost:5000/APIconversation/', {"val":value})
  .map(response=>response.json())
  .subscribe(
      data => {

            this.output = data.result.fulfillment.speech,
            if(data.result.fulfillment.speech == 'test'){
                saro.sendCard('done', '1' );   
            }               

       });

 } 
Run Code Online (Sandbox Code Playgroud)

我试图从InputFieldComponent调用sendCardComponent中定义的sendCard(),如下所示:

import { Component, …
Run Code Online (Sandbox Code Playgroud)

angular-components angular

6
推荐指数
1
解决办法
3万
查看次数

如何使用角度为2的角度材料?

我试过npm install angular-material --save并遵循这里的说明.

然后我添加了脚本并链接到 index.html

<script src="node_modules/angular-material/index.js"></script>
<link ref="stylesheet" href="node_modules/angular-material/modules/angular-material.css">
Run Code Online (Sandbox Code Playgroud)

然后我尝试添加一个简单的<md-button>但没有运气.

typescript angular-material angular

5
推荐指数
1
解决办法
4316
查看次数

如何验证和显示错误消息 - Angular2材料设计?

我有这个输入:

<form #f="ngForm" name="productForm">
     <md-input [(ngModel)]="product.price" name="price" required="true" placeholder="Price (USD)"></md-input>
     <div ng-messages="productForm.price.$error" role="alert">
         <div ng-message-exp="['required']">
              Price is required
          </div>
     </div>
</form>
Run Code Online (Sandbox Code Playgroud)

但是需要消息价格不会出现.

我该如何正确格式化错误消息?

当价格输入为空时,将显示ng-invalid类:

在此输入图像描述

在此输入图像描述

当我填写一些东西: 在此输入图像描述

Angular在其中注入ng-valid类. 在此输入图像描述

我想要的是类似于angular1 md设计的样式,如下所示:

在此输入图像描述

typescript material-design angular-material angular

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

Angular 2打开兼容模式

我需要为Angular Material 2生成自定义主题.但是Angula 2团队提供的教程包括scss文件的以下代码:

@import '../../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core(); $primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);
Run Code Online (Sandbox Code Playgroud)

生成前缀为.mat的 CSS类,我相信元素的材料v1表示法?

所以我决定使用mat-card和其他组件,但是当我这样做时,angular 2给了我这个错误

"mat-"前缀不能用于ng-material v1兼容模式.

任何帮助如何A)打开兼容模式B)生成主题的另一种方式?

angular-material angular

5
推荐指数
1
解决办法
4308
查看次数

将对象映射到其他对象的干净方法?

有没有一种将对象映射到其他对象的好方法?也欢迎图书馆推荐。

例如,假设我有这些类:

export class Draft {
    id: number;
    name: string;
    summary: string;
}

export class Book {
    id: number;
    name: string;
    info: Info;
}

export class Info {
    value: string;
}
Run Code Online (Sandbox Code Playgroud)

传统上,要将字段从到映射DraftBook我必须为每个字段手动执行此操作:

export class Book {
    [...]

    fromDraft(Draft draft) {
        this.id = draft.id;
        this.name = draft.name;
        this.info = new Info();
        this.info.value = draft.summary;
    }
}
Run Code Online (Sandbox Code Playgroud)

有没有更简单的方法来映射以相同方式命名的对象字段?例如DraftBookidname领域,同时还能够从定义自定义映射,如draft.summarybook.info.value

请注意,这与我的实际用例相去甚远。在这里,手动进行赋值并不是那么糟糕,但是对于具有许多类似命名字段的对象来说,这是一件很麻烦的事情。

谢谢!

casting typing typescript

5
推荐指数
1
解决办法
4258
查看次数

鉴于字体已加载,角材料垫图标不起作用

我正在尝试在这样的导航栏组件中使用 mat-icon

<mat-toolbar>
    <span><img class="icon" src="../../assets/icon.png" fxFlex="auto"></span>
    <span class="fill-space"></span>
    <button mat-icon-button>
        <mat-icon aria-label="restart">mic</mat-icon>
      </button>
    <i class="material-icons">face</i>
</mat-toolbar>
Run Code Online (Sandbox Code Playgroud)

但是页面中显示的不是图标,而是文本“mic”和“face”

我已经在 app.module.ts 中导入了模块

import {MatCardModule, 
    MatIconModule,
    MatToolbarModule, 
    MatButtonModule, 
    MatFormFieldModule, 
    MatInputModule,
    MatSliderModule,
    MatSnackBarModule, 
    MatTableModule,
    MatTooltipModule,
    MatProgressBarModule,
    } from '@angular/material';

imports: [
    BrowserModule,
    ImageCropperModule,
    BrowserAnimationsModule,
    MatCardModule,
    MatIconModule,
    MatToolbarModule,
    MatButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSliderModule,
    MatSnackBarModule,
    MatSlideToggleModule,
    MatTableModule,
    MatTooltipModule,
    MatProgressBarModule,
    ...
Run Code Online (Sandbox Code Playgroud)

并且字体也在 index.html 中加载。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>app</title>
  <base href="/">

      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">
      <link href="https://fonts.googleapis.com/css? 
   family=Roboto:300,400,500,700|Roboto+Mono:300" rel="stylesheet">
      <link …
Run Code Online (Sandbox Code Playgroud)

angular-material angular

5
推荐指数
1
解决办法
4853
查看次数

具有静态数据的材料设计数据表布局

没有数据源(静态数据)的情况下如何使用材料设计数据表布局?在https://material.angular.io/components/table/examples上找不到该用例的示例。例如,我尝试以下操作没有成功。

<mat-table>
 <mat-header-row>
  <mat-header-cell>One</mat-header-cell>
  <mat-header-cell>Two</mat-header-cell>
 </mat-header-row>
 <mat-row>
  <mat-cell>aaa</mat-cell>
  <mat-cell>bbb</mat-cell>
 </mat-row>
</mat-table>
Run Code Online (Sandbox Code Playgroud)

我遇到以下错误:

LeistungenComponent.html:195 ERROR Error: StaticInjectorError(AppModule)[MatCell -> CdkColumnDef]: 
  StaticInjectorError(Platform: core)[MatCell -> CdkColumnDef]: 
    NullInjectorError: No provider for CdkColumnDef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:979)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveToken (core.js:1232)
    at tryResolveToken (core.js:1182)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1077)
    at resolveNgModuleDep (core.js:9238)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9919)
    at resolveNgModuleDep (core.js:9238)
Run Code Online (Sandbox Code Playgroud)

material-design angular-material angular mat-tab

5
推荐指数
1
解决办法
2873
查看次数