小编efa*_*ley的帖子

我正在处理登录表单,如果用户输入无效凭据,我们要将电子邮件和密码字段都标记为无效,并显示一条消息,指出登录失败.如何从可观察的回调中将这些字段设置为无效？

模板:

<form #loginForm="ngForm" (ngSubmit)="login(loginForm)" id="loginForm">
  <div class="login-content" fxLayout="column" fxLayoutAlign="start stretch">
    <md-input-container>
      <input mdInput placeholder="Email" type="email" name="email" required [(ngModel)]="email">
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" type="password" name="password" required [(ngModel)]="password">
    </md-input-container>
    <p class='error' *ngIf='loginFailed'>The email address or password is invalid.</p>
    <div class="extra-options" fxLayout="row" fxLayoutAlign="space-between center">
     <md-checkbox class="remember-me">Remember Me</md-checkbox>
      <a class="forgot-password" routerLink='/forgot-password'>Forgot Password?</a>
    </div>
    <button class="login-button" md-raised-button [disabled]="!loginForm.valid">SIGN IN</button>
     <p class="note">Don't have an account?<br/> <a [routerLink]="['/register']">Click here to create one</a></p>
   </div>
 </form>

登录方式:

 @ViewChild('loginForm') loginForm: HTMLFormElement;

 private login(formData: any): void {
    this.authService.login(formData).subscribe(res => …

我在我的页面上有一个表单,当我调用FormGroup.reset()它时将表单类设置为ng-pristine ng-untouched但FormControl.hasError(...)仍然返回truthy.我在这做错了什么？

模板

<form [formGroup]="myForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput formControlName="email" />
    <mat-error *ngIf="email.hasError('required')">
      Email is a required feild
    </mat-error>
  </mat-form-field>
  <mat-form-field>
    <input matInput type="password" formControlName="password" />
    <mat-error *ngIf="password.hasError('required')">
      Password is a required feild
    </mat-error>
  </mat-form-field>
  <button type="submit">Login</button>
</form>

零件

export class MyComponent {
  private myForm: FormGroup;
  private email: FormControl = new FormContorl('', Validators.required);
  private password: FormControl = new FormControl('', Validators.required);

  constructor(
    private formBuilder: FormBuilder
  ) {
    this.myForm = formBuilder.group({
      email: this.email,
      password: this.password
    }); …

我正在从HttpServer升级到HttpClientService,作为其中的一部分,我必须将标题从Headers切换到HttpHeaders.但是由于某些原因,我的自定义标题不再被追加.我需要更新什么才能添加标题？

  private getHeaders(headers?: HttpHeaders): HttpHeaders {
    if (!headers) {
      headers = new HttpHeaders();
    }
    headers.delete('authorization');
    const token: any = this.storageService.getItem('token');
    if (token) {
      headers.append('Authorization', 'Bearer ' + token);
    }
    const user: User = this.storageService.getObject('user');
    if (user && Object.keys(user).length) {
      headers.append('X-Session-ID', user.uuid);
      headers.append('X-Correlation-ID', this.uuidService.generateUuid());
    }
    return headers;
  }

该方法返回一个httpHeader,但它是空的.

我正在使用Angular 4 CLI(v.1.0.0)并处理测试我创建了一些使用jasmine来创建间谍的模拟.在IDE中一切看起来都没问题,但是在我收到的终端和错误中写着"找不到名字'茉莉花'".

起初我认为问题是茉莉没有添加到打字中,但我可以看到package.json包含茉莉花类型def的导入,所以我不确定缺少什么.

mocks.ts

export class MockAuthService {
  public login: Function = jasmine.createSpy('login');
}

export class MockHttpService {
  public delete: Function = jasmine.createSpy('delete');
  public get: Function = jasmine.createSpy('get');
  public post: Function = jasmine.createSpy('post');
  public put: Function = jasmine.createSpy('put');
}

运行ng服务在终端中返回以下错误消息.

C中的错误:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(2,23):找不到名字'jasmine'.C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(6,24):找不到名字'jasmine'.C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(7,21):找不到名字'jasmine'.C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(8,22):找不到名字'jasmine'.C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(9,21):找不到名字'jasmine'.webpack:编译失败.

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": …

在Angular 1.x中,我可以使用.$ watch来观看我想要的任何东西,但是在Angular 2中我们有ngOnChanges,它非常酷且高性能,但只能监视输入和输出装饰器.但是我不时会看到本地属性,以便我可以在更改时发出事件.我记得看到一篇文章解释了如何明确地告诉Angular 2观看单个属性,但对于我的生活,我再也找不到文章了,我所做的每一次搜索都告诉我使用带有onChanges的输入/输出装饰器.如何为@ViewChild或其他本地属性创建观察程序？

例如,我有一个ngForm,当它的验证状态从有效变为无效或反之亦然时,我想将状态发送到另一个组件,以便它可以做出反应.但是,因为我的ngForm是@ViewChild而不是@Input或@Output ngOnChanges没有检测到更改.

我试图重试我的请求,以便我可以在发送用户再次登录之前获得刷新令牌,但是当我尝试使用retryWhen请求时我收到错误,我不知道为什么.

http.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

@Injectable()
export class HttpService {

  constructor(
    private http: Http
  ) { }

  public get(url: string, headers?: Headers): Observable<any> {
    return this.http.get(url, this.getHeaders(headers))
      .map(this.extractData)
      .retryWhen((error: any) => { ... }) // [ts] Property 'retryWhen' does not exist on type 'Observable<any>'.
      .catch(this.handleError);
  }
}

我刚收到一台新的笔记本电脑用于工作,显示器显示为4k @ 3840 x 2160,建议值为250%.然而,大多数网站的滚动条也增加了250%,这很可怕.但是我注意到一些网站如googles似乎没有这个问题.他们如何告诉浏览器不要这样做？

示例:Stack Overflow具有巨型滚动条

虽然谷歌网站以某种方式避免这种情况.

我想使用一个变量作为将添加到类列表中的 ngClass 的值。我的用例是我有一组图像精灵，有一个基本精灵，然后是一个活动状态，它与基本精灵具有相同的文件名，只是在末尾添加了“-active”。我通过为元素提供与所需精灵文件名匹配的类来将精灵添加到文档中。当用户将鼠标悬停在元素上时，我需要在两个精灵之间来回切换。我怎么做？

例如这样的东西（注意：tool.name === 要显示的精灵的文件名）：

<li *ngFor='let tool of tools' (mouseenter)='tool.isActive = true' (mouseleave)='tool.isActive = false'>
  <span [ngClass]='{ {{tool.name}}-active: tool.isActive, {{tool.name}}: !tool.isActive }'>{{tool.name}}</span>
</li>

在设置原理图时，我发现可以提示输入以下任何类型 String | 布尔 | 数组 | 数量 | 整数 | 空 | 目的。

我正在尝试设置一个示意图，提示用户从可用模块列表中选择一个模块。例如，用户会看到这样的内容：

What module are you adding this store to?
 > Foo
   Bar
   Baz

虽然有大量字符串和布尔提示的示例，但没有人提供我找到的数组提示的示例。对于我的一生，我无法弄清楚如何在数组中提供选项来提示用户进行选择，而这根本没有出现在他们的文档中。

{
  "$schema": "http://json-schema.org/schema",
  "id": "SchematicsIDXStoreGen",
  "title": "IDX Store Gen Schema",
  "type": "object",
  "properties": {
    "featureName": {
      "type": "string",
      "description": "The name of the store",
      "x-prompt": "What is the name of the store you'd like to create"
    },
    "module": {
      "type": "array",
      "description": "Select the appropriate module",
      "x-prompt": "What module are you adding …

我正在更新我的应用程序以使用模块结构,当我尝试将我的管道组件添加到共享模块时,我遇到了一个奇怪的问题.从我所读到的,我已经把一切都设置得正确,所以我必须遗漏一些东西.

错误: Unhandled Promise rejection: Template parse errors: The pipe 'cmgTitleize' could not be found

我有一个BrowseModule,这个模块声明了一个ProjectCardComponent有一个使用cmgTitleize管道的模板.提供访问TitleizePipe我导入我的SharedModule.

@NgModule({
  declarations: [
    ...,
    ProjectCardComponent
  ],
  imports: [
    ...,
    SharedModule
  ],
  providers: [
    ...
  ]
})

export class BrowseModule { }

的SharedModule,进口PipesModule:

@NgModule({
  declarations: [
    ...
  ],
  exports: [
    ...
  ],
  imports: [
    ...,
    PipesModule
  ]
})

export class SharedModule { }

PipesModule声明并导出TitelizePipe:

@NgModule({
  declarations: [
    ... …