这是我第一次使用typescript在Angular上.我一直在努力创建这个模态指令,灵感来自ngMorph.
这正如预期的那样正常,但我遇到了一个非常奇怪的问题.当我点击按钮打开模态框时,它工作得很好,我关闭模态框,它关闭.当我尝试再次打开相同的模态框并尝试关闭时,它不会关闭.并且它也不会抛出任何错误.
调试后,我发现modal-active该类中的类modal-button没有被删除.
HTML
<div class="modal-button edit-sample-modal" [appModal] data-modal="edit-sample-modal">Open Modal</div>
<div class="custom-modal" id="edit-sample-modal">
<a href="javascript:void(0)" class="text-default">
<i class="fa fa-close fa-fw close-modal"></i>
</a>
</div>
这是我的模态代码
import { Directive, ElementRef, AfterViewChecked, Input, HostListener } from '@angular/core';
@Directive({
selector: '[appModal]'
})
export class ModalDirective implements AfterViewChecked {
@Input()
appModal: string;
constructor(
private element: ElementRef
) { }
ngAfterViewChecked() {
// function to go here
this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
}
@HostListener('click') onclick() {
this.initModalBox(this.element.nativeElement, this.element.nativeElement.getAttribute('data-modal'));
const modalElement = document.getElementById(this.element.nativeElement.getAttribute('data-modal'));
this.element.nativeElement.classList.toggle('modal-active'); …我有一个简单的表格如下:
some.component.html
<form class="example-form" novalidate (ngSubmit)="onSubmit()" autocomplete="off" [formGroup]="testform">
<input type="text" formControlName="name" class="form-control" placeholder="Enter name" required/>
<app-show-errors [control]="claimform.controls.name"></app-show-errors>
<button type="submit" (click)="onSubmit()">Next</button>
</form>
some.component.ts
ngOnInit() {
this.testform= new FormGroup({
name: new FormControl('', { validators: Validators.required})
}, {updateOn: 'submit'});
}
onSubmit() {
if (this.testform.valid) {
alert('saving data');
} else {
this._validationService.validateAllFormFields(this.testform);
}
}
validationService.ts
validateAllFormFields(formGroup: FormGroup) {
Object.keys(formGroup.controls).forEach(field => {
const control = formGroup.get(field);
if (control instanceof FormControl) {
control.markAsTouched({ onlySelf: true });
} else if (control instanceof FormGroup) {
this.validateAllFormFields(control);
}
}); …嗨,我是angular 5的新手,并跟着一些博客写了HTTP拦截器.
export class AngularInterceptor implements HttpInterceptor {
public http404 = false;
constructor() { }
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log("intercepted request ... ");
// Clone the request to add the new header.
const httpReq = req.clone(
{
headers: req.headers.set("headerName", "headerValue")
}
);
console.log("Sending request with new header now ...");
//send the newly created request
return next.handle(httpReq)
.catch((error, caught) => {
//intercept the respons error and displace it to the console
console.log("Error Occurred");
if(error.status === 404)
this.http404 = true; …任何人都可以帮助我修复锤子错误
})(window, document, 'Hammer');
^
ReferenceError: window is not defined
at Object._MAP.8 (/Users/ks89/git/universal-starter/dist/server.js:126460:4)
在角度通用。
我有未知数量的卡，我想在上面对这些卡进行显示，并将每两张卡显示在一行
<mat-card class="example-card">
<mat-card-header>
<div mat-card-avatar class="example-header-image"></div>
<mat-card-title>{{user.firstName}}</mat-card-title>
<mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
bred for hunting.
</p>
</mat-card-content>
<mat-card-actions>
</mat-card-actions>
</mat-card>
我正在使用角度5和材质设计6，无论如何要这样做？
我正在尝试使Angular 4中的代码适应Angular5。我进行了很多更改，但是关于出现错误RequestOptions。该代码是关于身份验证的，这是我出现错误的地方：
import { Injectable } from '@angular/core';
import { RequestOptions} from '@angular/http';
import {User} from '../model/model.user';
import 'rxjs/add/operator/map';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class AuthService {
constructor(public http: HttpClient) { }
public logIn(user: User) {
const headers = new HttpHeaders();
headers.append('Accept', 'application/json')
// creating base64 encoded String from user name and password
const base64Credential: string = btoa( user.username + ':' + user.password);
headers.append('Authorization', 'Basic ' + base64Credential);
// this is where i'm having a problem …我试图FormArray在另一个内部添加,FormArray但无法弄清楚如何做到这一点.
我在我的打字稿文件中有这个:
createForm() {
this.myForm = this.formBuilder.group({
people: this.formBuilder.array([
{ addresses: this.formBuilder.array([]) }
])
});
}
基本上,我试图说一个人FormArray,每个人可以有多个地址.我尝试在我的html中渲染它:
<div [formGroup]="myForm">
<div formArrayName="people">
<div *ngFor="let person of people.controls; let i=index">
Person {{ i + 1 }}
<div *ngFor="let address of person.addresses.controls; let j=index">
Address {{ j + 1 }}
</div>
</div>
</div>
</div>
当然,这只是一个例子,我的实际形式会有更多的进展.我有一个"添加人"链接,它调用我的打字稿中的一个函数,将一个对象推送给人FormArray.
当我打电话时createForm(),我在浏览器中收到以下错误:
ERROR TypeError: this.form._updateTreeValidity is not a function
ERROR TypeError: this.form.get is not a function
我究竟做错了什么？我如何完成我想做的事情？任何帮助,将不胜感激!
我们已经在Azure上部署了api，并试图在用angular 5编写的Web应用程序中使用该API。但是，当我们尝试使用该API时，会遇到以下错误。
Chrome混合内容：“ https://somedevapp.azurewebsites.net/#/managesomething ”上的页面已通过HTTPS加载，但请求了不安全的XMLHttpRequest端点' http://admindevapp.azurewebsites.net/api/data/getdata ' 。该请求已被阻止；内容必须通过HTTPS提供。
Firefox阻止加载混合的活动内容
这个问题与CORS有关吗？如何解决这个问题？
任何帮助对此表示赞赏！
我有一个页面，用户可以在该页面上应用一些过滤器（通过表单），然后用户可以选择过滤的元素之一并转到详细信息页面。
如果用户在详细信息页面上单击返回，则会被重定向到过滤器页面。在不保留过滤器数据的情况下重新加载了过滤器页面。
我将history.back（）函数用于后退动作。
我想知道是否存在一种导航到页面的方法，而无需重新加载该页面即可显示用户单击详细信息链接之前显示的确切页面。
基本上，我的component.ts文件中有一个称为“ addToast”的方法。这是：-
addToast(options): any {
if (options.closeOther) {
this.toastyService.clearAll();
}
this.position = options.position ? options.position : this.position;
const toastOptions: ToastOptions = {
title: options.title,
msg: options.msg,
showClose: options.showClose,
timeout: options.timeout,
theme: options.theme,
onAdd: (toast: ToastData) => {
/* added */
},
onRemove: (toast: ToastData) => {
/* removed */
}
};
switch (options.type) {
case "default":
this.toastyService.default(toastOptions);
break;
case "info":
this.toastyService.info(toastOptions);
break;
case "success":
this.toastyService.success(toastOptions);
break;
case "wait":
this.toastyService.wait(toastOptions);
break;
case "error":
this.toastyService.error(toastOptions);
break;
case "warning":
this.toastyService.warning(toastOptions);
break;
}
} …