相关疑难解决方法(0)

请向我解释为什么我一直收到这个错误: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

显然,我只是在开发模式下获得它,它不会在我的生产版本中发生,但它非常烦人,而我根本不理解在我的开发环境中出现错误的好处 - 不会出现在prod上 - - 可能是因为我缺乏理解.

通常,修复很容易,我只是将错误导致代码包装在setTimeout中,如下所示:

setTimeout(()=> {
    this.isLoading = true;
}, 0);

或者使用如下构造函数强制检测更改constructor(private cd: ChangeDetectorRef) {}::

this.isLoading = true;
this.cd.detectChanges();

但为什么我经常遇到这个错误？我想了解它,以便将来可以避免这些hacky修复.

我是Angular2的新手,我正在阅读已解决的问题而且我发现了这个问题

Angular2方法绑定错误:"检查后值已更改"

这是非常有趣的,但我的问题是我如何从开发变为生产,这是在阅读这个问题后存在差异

Angular2的生产和开发模式有什么区别？

我搜索但没有找到任何表明模式,以及你必须指示模式(开发)或模式(生产)的地方.

在控制台中,我可以看到组件类....Call enableProdMode() to enable the production mode.中System.config({或组件类中的位置.

是否需要特定的进口？

在这种情况下,我正在向视图中显示学生列表(数组)ngFor:

<li *ngFor="#student of students">{{student.name}}</li>

每当我将其他学生添加到列表中时,它都会更新.

然而,当我给它一个pipe到filter由学生的名字,

<li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>

在我在过滤学生姓名字段中输入内容之前,它不会更新列表.

这是plnkr的链接.

Hello_world.html

<h1>Students:</h1>
<label for="newStudentName"></label>
<input type="text" name="newStudentName" placeholder="newStudentName" #newStudentElem>
<button (click)="addNewStudent(newStudentElem.value)">Add New Student</button>
<br>
<input type="text" placeholder="Search" #queryElem (keyup)="0">
<ul>
    <li *ngFor="#student of students | sortByName:queryElem.value ">{{student.name}}</li>
</ul>

sort_by_name_pipe.ts

import {Pipe} from 'angular2/core';

@Pipe({
    name: 'sortByName'
})
export class SortByNamePipe {

    transform(value, [queryString]) {
        // console.log(value, queryString);
        return value.filter((student) => new RegExp(queryString).test(student.name))
        // return value;
    } …

风格如

<div [style.background-image]="\'url(\' + image + \')\'">Background</div>
<div [style.transform]="rotate(7deg)"

不再添加

我正在使用Angular2 quick startdemo进行演示TypeScript.一切都运行良好,但在完成演示后,我在浏览器控制台中看到了一条消息

Angular 2正在开发模式下运行.调用enableProdMode()以启用生产模式.

我在这个答案的帮助下做到了这一点.

import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { enableProdMode } from '@angular/core';

enableProdMode();
bootstrap(AppComponent);

题

1. 当应用程序进入生产模式时会发生什么？
2. 除了删除控制台消息之外,我没有看到应用程序行为的任何变化

有人可以解释一下吗？

我有下面的代码,它工作正常,它做的是ng为重复为列对象中的每列创建一列.

目前,它显示每列中卡片对象的每张卡片.

我想要它只是在列WHERE column.id = card.column中显示卡片

如何修改我的代码才能执行此操作？

  import {Input, Output, EventEmitter, Component, Injectable} from 'angular2/core'
  import {NgFor} from 'angular2/common'
  import {Observable} from 'rxjs/Observable';

  interface Card {
    id?: number;
    title?: string;
    column?: number;
  }

  @Injectable()
  export class DataService {
    cards$: Observable<Array<Card>>;
    private _cardsObserver: any;
    private _dataStore: Array<Card>;

    constructor(){
      this._dataStore = [
        {id: 1, title: 'Card A', column: 1},
        {id: 2, title: 'Card B', column: 2},
        {id: 3, title: 'Card C', column: 2}
      ];

      this.cards$ = new Observable(observer =>
        this._cardsObserver = observer).share(); …

通过子组件的多个指令传递对象时,我收到以下错误消息:

检查后表情发生了变化.上一个值:'true'.当前值:'false'.

模板:

<form *ngIf="deliveryrequest" [formGroup]="deliveryRequestForm" (ngSubmit)="onSubmit(deliveryRequestForm)">
    <h4>Detail: {{deliveryrequest.nr}}</h4>
    <div class="row">
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6">
            <drr-request [request]="deliveryrequest" [group]="deliveryRequestForm"></drr-request>
            <drr-received [received]="deliveryrequest" [group]="deliveryRequestForm"></drr-received>
        </div>
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6">
            <drr-requester [requester]="deliveryrequest" [group]="deliveryRequestForm"></drr-requester>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12 col-xs-12">
            <button type="submit" class="btn btn-primary" [disabled]="!deliveryRequestForm.valid">Bewaren</button>
        </div>
    </div>
</form>

请求者组件模板:

<div [formGroup]="requesterForm">
    <div class="row">
        <div class="col-lg-12 col-xs-12 col-md-12 col-sm-12">
            <div class="panel panel-default">
                <div class="panel-heading">Aanvrager</div>
                <div class="control-group">
                    <drr-person [required]="true" (isMinorEmittor)="setPersonIsMinor($event)" [group]="requesterForm"></drr-person>
                </div>
            </div>
        </div>
    </div>
    <div class="row" formArrayName="responsiblePersonsNationalNumbers">
        <div class="col-lg-6 col-xs-12 col-md-6 col-sm-6"
             *ngFor="let …

Angular 2支持单向数据流,如果有人可以解释或提供一些资源的参考资料,可以通过图解详细解释单向数据流.