小编eba*_*nin的帖子

使用Angular 2,我想多次复制模板中的一行.迭代一个对象很容易*ngFor="#object of objects".但是,我想运行一个简单的for循环,而不是foreach循环.像(伪代码)的东西:

{for i = 0; i < 5; i++}
  <li>Something</li>
{endfor}

我该怎么做？

使用Angular 2,双向绑定在模板驱动的表单中很容易 - 您只需使用香蕉盒语法.您将如何以模型驱动的形式复制此行为？

例如,这是标准的反应形式.让我们假装它看起来比它看起来复杂得多,有很多种不同的输入和业务逻辑,因此比模板驱动的方法更适合模型驱动的方法.

export class ExampleModel {
    public name: string;
    // ... lots of other inputs
}

@Component({
    template: `
        <form [formGroup]="form">
            <input type="text" formControlName="name">
            ... lots of other inputs
        </form>

        <h4>Example values: {{example | json}}</h4>
    `
})
export class ExampleComponent {
    public form: FormGroup;
    public example: ExampleModel = new ExampleModel();

    constructor(private _fb: FormBuilder) {
        this.form = this._fb.group({
            name: [ this.example.name, Validators.required ]
            // lots of other inputs
        });
    }

    this.form.valueChanges.subscribe({
        form => {
            console.info('form values', form);
        } …

我正在写一个Angular 2单元测试.我有一个@ViewChild子组件,我需要在组件初始化后识别.在这种情况下,它是Timepickerng2-bootstrap库中的一个组件,但具体情况无关紧要.在我之后detectChanges(),子组件实例仍未定义.

伪代码:

@Component({
    template: `
        <form>
            <timepicker
                #timepickerChild
                [(ngModel)]="myDate">
            </timepicker>
        </form>
    `
})
export class ExampleComponent implements OnInit {
    @ViewChild('timepickerChild') timepickerChild: TimepickerComponent;
    public myDate = new Date();
}


// Spec
describe('Example Test', () => {
    let exampleComponent: ExampleComponent;
    let fixture: ComponentFixture<ExampleComponent>;

    beforeEach(() => {
        TestBed.configureTestingModel({
            // ... whatever needs to be configured
        });
        fixture = TestBed.createComponent(ExampleComponent);
    });

    it('should recognize a timepicker'. async(() => {
        fixture.detectChanges();
        const timepickerChild: Timepicker = fixture.componentInstance.timepickerChild;
        console.log('timepickerChild', timepickerChild)
    })); …

我读过的Angular 2教程直接在app.component.ts文件中放置变量.例如var BAR下面,它通过{Foo}接口提取数据.

import {Component} from 'angular2/core';
import {Foo} from './foo';

@Component({
   etc.
});

export class AppComponent {
   bar = BAR;
}

var BAR: Foo[] = [
   { 'id': 1 },
   { 'id': 2 }
];

但是,我在本地JSON文件中有BAR的数据.我不相信{HTTP_PROVIDER}是必要的.我如何从外部文件中获取JSON数据？

我正在使用Angular v4.4.4.在组件中,在模板中单击按钮后,假定反应形式有效,将保存表单.像(伪代码)的东西:

public onSave(): void {
    if (this.myForm.valid) {
        this._createFoo();
    }
}

private _createFoo(): void {
    this._fooService.createItem(this.foo).subscribe(result => {
        // stuff happens...
    });
}

在相关的单元测试中,我需要强制表单有效,以便我可以确认正在调用服务.像这样的东西:

it('should create Foo', () => {
    const spy = spyOn(_fooService, 'createItem').and.callThrough();
    component.foo = new Foo();
    fixture.detectChanges();
    const bookButton = fixture.debugElement.query(By.css('#bookButton'));
    expect(bookButton !== null).toBeTruthy('missing Book button');
    bookButton.triggerEventHandler('click', null);
    expect(spy).toHaveBeenCalled();
});

这将失败,因为myForm永远不会设置为有效.

在这种特殊情况下,我不想给表单中的每个输入赋值.我只需要观察并查看服务订阅是否发生.如何强制表格有效？

我正在使用流明5.3.1.$app->withFacades()并且$app->withEloquent()已被取消评论app.php.在web.php我运行以下代码:

$app->get('foo', function () {
    return app('db')->select("SELECT * FROM foo");

    return "Connected successfully to database " . DB::connection()->getDatabaseName();
});

该select()呼叫正确地从返回的数据foo表.但是,DB::connection()退货:

FatalErrorException in Manager.php line 74: 
Call to a member function getConnection() on null

为什么一个工作而另一个工作？

根据我对Angular和RxJ的理解,有两种方法可以终止Observable.你可以unsubscribe()从他们或使用takeUntil()和complete().以下是每种方法的示例(伪代码).

取消订阅()方法

private _id: number;
private _subscriptions: Subscription[] = [];

constructor(private _route: ActivatedRoute) {
    this._getId();
}

public ngOnDestroy(): void {
    this._subscriptions.forEach(
        subscription => subscription.unsubscribe()
    );
}

private _getId(): void {
    this._subscriptions.push(
        this._route.params.subscribe(params => this._id = +params['id'])
    );
}

takeUntil()和complete()方法

private _id: number;
private _ngUnsubscribe: Subject<void> = new Subject<void>();

constructor(private _route: ActivatedRoute) {
    this._getId();
}

public ngOnDestroy(): void {
    this._ngUnsubscribe.next();
    this._ngUnsubscribe.complete();
}

private _getId(): void {
    this._route.params.takeUntil(this._ngUnsubscribe).subscribe(
        params => this._id = +params['id']
    );
}

在Angular中,是否有一种终止Observables的首选方法？

使用Angular 2的ng2-bootstrap插件时，无法使timepicker change()事件正常工作。可以在示例页面（http://valor-software.com/ng2-bootstrap/index-bs4.html#/timepicker）上进行演示。

在示例页面的“打字稿”部分，您将找到该changed()函数。当您(change)选择时间时，控制台日志将不会触发，这表明该changed()函数从未被调用。

// template:
<timepicker [(ngModel)]="mytime" (change)="changed()" [hourStep]="hstep" 
            [minuteStep]="mstep" [showMeridian]="ismeridian" 
            [readonlyInput]="!isEnabled"></timepicker>

// @Component:
public changed():void {
  console.log('Time changed to: ' + this.mytime);
};

我是在误解计时选择器(change)事件的实现方式还是该事件被破坏了？

使用Angular 2，我有一个名为“ example”的参数，它是一个Date对象。在模板中，我要使用日期管道设置“示例”的格式。像这样：

<input type="text" [value]="example | date:'shortTime'">
// 9:00 AM 

但是，我需要使用Angular的反应形式。FormControls优先，因此formControlName将覆盖value指令中的所有内容。

<input type="text" formControlName="example">
// Wed Mar 08 2017 09:00:00 GMT-0700 (MST)

<input type="text" formControlName="example" [value]="example | date:'shortTime'">
// Wed Mar 08 2017 09:00:00 GMT-0700 (MST)

该formControlName指令将不接受管道。如何在反应形式的模板中格式化Date对象？

伪代码：

@Component({
    template: `
        <form [formGroup]="formGroup">
            Example: <input type="text" formControlName="example">
        </form>
    `
})

export class ExampleComponent implements OnInit {
    public formGroup: FormGroup;
    public example: Date = new Date();

    public ngOnInit() {
        this.formGroup = new FormGroup({
            example: …

我曾经将Material库导入到基础模块app.module.ts中,但Angular Material v2.0.0-beta.3不推荐使用Material模块.根据更改日志(https://github.com/angular/material2/blob/master/CHANGELOG.md),您现在应该创建一个导入单个Material组件的自定义模块.我无法做到这一点.

这种方法:

@NgModule({
    declarations: [ MdInputModule ],
    imports: [
        CommonModule,
        MdInputModule
    ],
    exports: [ MdInputModule ]
})

export class FooMaterialModule {}

导致此错误:

未捕获错误:模块'FooMaterialModule'声明的意外模块'MdInputModule'.请添加@ Pipe/@ Directive/@ Component注释.

如何为Angular Material库创建自定义模块？