我'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,而不是我的要求.
我正在尝试测试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) 我知道tick()函数使用fakeAsync.而且我也可以使用fixture.whenStable().then()和async以及fakeAsync.我想知道两者的确切用例.任何人都可以用例子解释这一点
注意:我想在两种方案中使用虚假服务或存根.
我试图在我的github项目问题中从公共库中引用一些问题.我所做的是我正在评论我的项目中列出的一个问题,并且我提到了公共图书馆中列出的实际问题.
例如:https://github.com/public-library/issues/42
当我点击该链接时,它说:@ amitpchigadani amitpchigadani在MyOrganisation/projectName一小时前引用了这个问题.
但我想从公共图书馆中删除该引用.现在可以这样做吗?
注意:我稍后删除了引用并进行了检查,但该注释/警告仍存在于公共库问题中.
我希望获得我的一个表单("系列")值,如果通过订阅更改但似乎有问题,因为我的控制台日志中没有任何内容.
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) 我有以下路由应该路由到同一个组件,我可以通过使用以下结构来让它工作。
const carModuleRoutes: Routes = [
{ path: 'car/:category/:carId', component: CarDetailComponent},
{ path: 'car/:carId', component: CarDetailComponent},
];
Run Code Online (Sandbox Code Playgroud)
但我知道这不是这样做的标准方法,是否有执行相同功能的正确方法?
我是 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
我有与的活动清单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) 在我的项目中,我使用“ 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 …
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) angular ×9
javascript ×3
jasmine ×2
typescript ×2
unit-testing ×2
angular5 ×1
git ×1
github ×1