小编Ami*_*ani的帖子

表单控件valueChanges给出以前的值

我'question1'在表单对象中有一个名称的表单控件,parentForm我已按以下方式订阅它.

它有两个选项的单选按钮Yes和No,当我选择No,我得到Yes,当我选择Yes它的一个No.

this.parentForm.controls['question1'].valueChanges.subscribe(
  (selectedValue) => {
    // If option `No is selected`
    console.log(selectedValue);  // displays No. OK
    console.log(this.parentForm.value['question1']);  // displays Yes. Problem is here
  }
);
Run Code Online (Sandbox Code Playgroud)

selectedValue变量具有正确的值,但如果我这样做,console.log(this.parentForm.value['question1']则给出前一个值.

我试图setTimeout()在检索之前输入一个值this.parentForm.value['question1'],它只是工作正常.

setTimeout(() => {
  console.log(this.parentForm.value['question1']); // gives the correct value.
}, 500);
Run Code Online (Sandbox Code Playgroud)

但我的问题是,为什么parentForm在控件的值发生变化时不会更新,而且我只是在更改值后才检索其值.

注意:我不想观察parentForm.valueChanges,而不是我的要求.

angular2-forms angular2-formbuilder angular

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

Angular 5测试:如何获取对子组件的引用

我正在尝试测试Angular应用程序中主机组件和子组件之间的交互.我不知道如何获取对父元素创建时创建的子组件的引用.这是设置:

child.component.spec.ts

@Component({template: `<child [data]="model"></child>`})
class HostComponent {
  public model:any;
}

describe('ChildComponent', () => {
  let hostFixture: ComponentFixture<HostComponent>;
  let childFixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, HostComponent]
    });
  }));

  beforeEach(() => {
    // this creates the child component as well, but how to get to it?
    hostFixture = TestBed.createComponent(HostComponent);

    // this creates a NEW instance of child component, not the one from the Host template
    // so it's not the instance I actually want to test
    childFixture = TestBed.createComponent(ChildComponent); …
Run Code Online (Sandbox Code Playgroud)

unit-testing angular

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

在angular2测试中,fakeAsync和async有什么区别

我知道tick()函数使用fakeAsync.而且我也可以使用fixture.whenStable().then()和async以及fakeAsync.我想知道两者的确切用例.任何人都可以用例子解释这一点

注意:我想在两种方案中使用虚假服务或存根.

javascript jasmine karma-jasmine angular2-testing angular

20
推荐指数
1
解决办法
7995
查看次数

删除GitHub中的问题参考

我试图在我的github项目问题中从公共库中引用一些问题.我所做的是我正在评论我的项目中列出的一个问题,并且我提到了公共图书馆中列出的实际问题.

例如:https://github.com/public-library/issues/42

当我点击该链接时,它说:@ amitpchigadani amitpchigadani在MyOrganisation/projectName一小时前引用了这个问题.

但我想从公共图书馆中删除该引用.现在可以这样做吗?

注意:我稍后删除了引用并进行了检查,但该注释/警告仍存在于公共库问题中.

git github

9
推荐指数
1
解决办法
2395
查看次数

Angular Form Control value更改不起作用

我希望获得我的一个表单("系列")值,如果通过订阅更改但似乎有问题,因为我的控制台日志中没有任何内容.

import { Component , AfterViewInit } from '@angular/core';
import {FormGroup,FormBuilder} from '@angular/forms';
import {Observable} from 'rxjs/Rx';

@Component({
selector: 'app-root',
template: `<h1>Hello World!</h1>
            <form [formGroup]="frm1">
            <input type="text" formControlName="name" >
            <input type="text" formControlName="family">
            </form>
            `,

})

export class AppComponent implements AfterViewInit{ 

 frm1 : FormGroup;

constructor( fb:FormBuilder){
    this.frm1 = fb.group({
        name : [],
        family: []
    });     
}
ngAfterViewInit(){  
    var search = this.frm1.controls.family;
    search.valueChanges.subscribe( x => console.log(x));    
}
}
Run Code Online (Sandbox Code Playgroud)

angular2-forms angular2-formbuilder angular

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

Angular 5 - 路由到具有不同 URL 的相同组件

我有以下路由应该路由到同一个组件,我可以通过使用以下结构来让它工作。

const carModuleRoutes: Routes = [
    { path: 'car/:category/:carId', component: CarDetailComponent},
    { path: 'car/:carId', component: CarDetailComponent},
];
Run Code Online (Sandbox Code Playgroud)

但我知道这不是这样做的标准方法,是否有执行相同功能的正确方法?

angular-ui-router angular2-routing angular

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

Angular 5 Material Design 全宽输入

我是 angular 5 的新手,所以我需要制作一个带有全角输入的表单,并且我希望每个输入都占用其容器的整个宽度,但是,它只占用它的一半。

这是我得到的

我正在使用有角度的材料,这是我的代码:

<mat-grid-tile class="add-product-content" [rowspan]="4">
    <form [formGroup]="addProductGroup" class="form-add-product" (ngSubmit)="sendDataProduct()">
        <mat-accordion >
            <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" >
              <mat-expansion-panel-header>
                <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>
              <div class="input-container">
                  <div class="flex-item">
                      <mat-form-field>
                          <input matInput placeholder="First name">
                      </mat-form-field>
                  </div>
                  <div class="flex-item">
                      <mat-form-field>
                        <input matInput type="number" min="1" placeholder="Age">
                      </mat-form-field>
                  </div>
              </div>
              <mat-action-row>
                  <button mat-button color="primary" (click)="nextStep()">Next</button>
              </mat-action-row>
           </mat-expansion-panel>

           <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" >
              <mat-expansion-panel-header>
                  <mat-panel-title>Personal data</mat-panel-title>
              </mat-expansion-panel-header>

              <mat-form-field>
                  <input matInput placeholder="First name">
              </mat-form-field>
              <mat-form-field>
                  <input matInput type="number" min="1" placeholder="Age">
              </mat-form-field>
              <mat-action-row>
                  <button …
Run Code Online (Sandbox Code Playgroud)

javascript material-design angular-material angular angular5

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

Angular 4 setTimeout()具有可变的延迟和等待

我有与的活动清单timestamp。我想要的是基于显示事件timestamp:

要添加延迟:

delay = timestamp(t+1) - timstamp(t)
Run Code Online (Sandbox Code Playgroud)

我知道这不适用于setTimeout,但是有一种解决方法,如果超时是恒定的,就我而言不是。

是否可以让下一个setTimeout()等待上一个?具体来说,如果第setTimeout()一个延迟5秒,第二个延迟3秒,则第二个将首先出现。我希望它们的顺序相同,但要一个接一个地执行。

此示例适用于恒定延迟,但是我想根据对列表进行迭代所获得的信息来计算延迟。

for (i = 1; i <= 5; ++i) {
  setDelay(i);
}

function setDelay(i) {
  setTimeout(function(){
    console.log(i);
  }, 1000);
}
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

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

NullInjectorError:Angular 2 中没有 InjectionToken LOCAL_STORAGE 的提供者

在我的项目中,我使用“ angular-webstorage-service ”中的 LOCAL_STORAGE 模块。它的功能工作正常,但我在测试时遇到错误。我正在使用 Kharma 和 Jasmine

我不明白我哪里做错了,如果有人遇到这个问题,请告诉我。

失败:StaticInjectorError(DynamicTestModule)[AppComponent -> InjectionToken LOCAL_STORAGE]:StaticInjectorError(平台:核心)[AppComponent -> InjectionToken LOCAL_STORAGE]:NullInjectorError:没有 InjectionToken LOCAL_STORAGE 的提供程序!

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { StorageServiceModule} from 'angular-webstorage-service';
//import * as $ from 'jquery';
import * as bootstrap from "bootstrap";


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent    
  ],
  imports: [
    BrowserModule,
    StorageServiceModule
  ],
  schemas: [ NO_ERRORS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Run Code Online (Sandbox Code Playgroud)

应用程序组件.ts …

angular

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

angular2单元测试:无法读取componentInstance.method()的属性未定义

mycomponent.spec.ts类:

这将引发错误:无法读取未定义的属性'ngOnInit'。

let myComponent: MyComponent;
let myService: MyService;

describe('myComponent', () => {
   beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [MyComponent],
    providers: [
      {provide: MyService, useClass: MockMyService} // **--passing Mock service**
  ]
}).compileComponents()
  .then(() => {
    myComponent = TestBed.createComponent(MyComponent).componentInstance;
    myService = TestBed.get(MyService);
    console.log(myService.getData());
  });
});

it('should get the mock data', () => {
   myComponent.ngOnInit(); //-----------> seems like myComponent is not defined at this place, how to resolve this error 
   expect(myComponent.data).toBe(DATA_OBJECT);
  });
});
Run Code Online (Sandbox Code Playgroud)

以下是MyComponent:

@Component({
  selector: 'pm-catalogs',
  templateUrl: './catalog-list.component.html'
})

export class MyComponent implements …
Run Code Online (Sandbox Code Playgroud)

unit-testing jasmine typescript karma-jasmine angular

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