我在角度2/4中使用了表单构建器,但现在我在角度6中使用它.我已经看到了这个问题(不能绑定到'formGroup',因为它不是'form'的已知属性)但是它是针对角度2.我对角度4完全相同,但我得到了这个错误.请帮忙:我的代码是:
app.module.ts :(我已导出FormsModule和ReactiveFormsModule):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LocalStorage } from './services/localStorage.service';
import { HttpModule, RequestOptions, XHRBackend } from '@angular/http';
import { Router } from '@angular/router';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { routing } from './app.route';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LoginComponent } from './components/login/component';
import { ForgotComponent } from './components/forgotPassword/component';
@NgModule({
exports: [
FormsModule,
ReactiveFormsModule
], …javascript angular-forms angular5 angular6 angular-formbuilder
我是Angular的新手,这个问题可能非常广泛.但我有兴趣了解有关国家管理使用情况的更多信息.最近我们的一个项目使用NGXS库实现了状态管理.但是,我试图了解它为应用带来的所有优势是什么？
实现非常深入,在高层次上,有一些操作将应用程序数据(由用户设置)和侦听器传递给那些处理请求并根据需要调度到下一步骤的操作.从一般的角度应用来看,这在应用程序使用或性能等方面有何不同.我正处于理解状态管理的初级阶段,所以我觉得我写的代码太多了,可能并不是真正需要的.示例 - 只是为了路由到另一个页面,我必须实现一个状态模式来保存对象并声明一个动作和一个监听器来实现该动作.
我正在阅读几份文件并获得有关如何实施国家管理的详细信息,但没有得到正确解决为什么要实施州管理的答案.
先感谢您!
1：mat-select 有 4 个值，1,2,3,4。
下面的代码适用于选择。所以如果它对读者有帮助，我想分享一下。
it('check the length of drop down', async () => {
const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
trigger.click();
fixture.detectChanges();
await fixture.whenStable().then(() => {
const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
expect(inquiryOptions.length).toEqual(4);
});
});
2：我需要另一个测试来验证同一个 mat-select 中的默认值是否为 3。当页面加载时，下拉菜单的默认值设置为 3。
it('should validate the drop down value if it is set by default', async () => {
const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
trigger.click();
fixture.detectChanges();
await fixture.whenStable().then(() => {
const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
const value = trigger.options[0].value;
expect(value).toContain(3);
});
});
任何帮助表示赞赏。
我在Windows 10上安装了最新的Node and Angular
npm install npm@latest -g
npm install -g @angular/cli@latest
但是，当我尝试启动一个项目时ng new new-project，出现以下错误
npm WARN tarball tarball data for @angular/compiler@^6.1.0 (sha512-TY6axB1c7VvYXf+ebFDq3Ej+edgii3CDxew8HnyTFAWeDF2Gh8io1vTYwtdyDka6U53ASaheM1HpiUjzvYH0jQ==) seems to be corrupted. Trying one more time.
npm WARN tar ENOENT: no such file or directory, open 'C:\Users\admin\Desktop\...\node_modules\.staging\@angular\common-6be83a81\locales\si.js'
...
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\admin\AppData\Roaming\npm-cache\_logs\2018-10-08T01_01_48_404Z-debug.log
Package install failed, see above.
我尝试完全卸载Node.js和Angular CLI，然后再次重新安装
npm install npm@latest -g
npm install -g @angular/cli@latest
但是还是一样的错误.....所以我用谷歌搜索了这个问题。似乎有些人也有，但是对于某些人来说，它却神奇地消失了。
如何解决这个问题？
我正在使用Angular 6。
我的应用程序在加载组件之前需要几秒钟的时间，而这些时间用于加载资源和验证用户。
当所有这些发生时，我的应用程序显示一个空白页面。
我想用一个预加载器替换那个丑陋的白页，该预加载器将在所有后台进程完成之前一直显示。
对于我添加了一个CSS加载微调里面index.html像
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My App</title>
<base href="/">
<!-- Fonts and icons -->
</head>
<body>
<app-root>
<!-- Pre-loading spinner -->
<!-- This code within the app-root will be wiped of once the child component is loaded -->
<!-- This code will not even be shown in the source code once the child component is loaded -->
<!-- We can put any code css/html/image/etc …我需要创建一个没有文件夹的组件。我正在使用 Angular-Cli 命令ng g c testing来创建组件。但是，该命令会为新创建的组件创建一个文件夹包装器。
我已将Angular 5应用程序升级到6.0.1,将RxJs升级到6.1.0.
在我的一项服务中,我有以下导入:
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
但是,我现在收到以下错误:
Module'"... node_modules/rxjs/observable/ErrorObservable"'没有导出的成员'ErrorObservable'.
我在网上搜索如何在rxjs6或名称中导入它
ErrorObservable
已经改变.
我用它作为升级过程的指南:
有谁知道如何解决这个导入？
我正在添加rxjs_compat到我的项目中以转移到v6库.
但是,现有HttpInterceptor的全局错误处理不再编译.不知道该去哪里.尝试各种各样.尝试所有的类型不匹配.
import { Injectable } from "@angular/core";
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpResponse,
HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError, map } from "rxjs/operators";
@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private toastr: ToastrService) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError(err => of(HttpErrorResponse)),
map(err => {
let message: string; …我想使用Angular 6和Web API下载PDF.这是代码实现,
mycomponent.ts
download(myObj: any) {
this.testService.downloadDoc(myObj.id).subscribe(result => {
var url = window.URL.createObjectURL(result);
window.open(url);
console.log("download result ", result);
});
}
myService.ts
downloadDoc(Id: string): Observable<any> {
let url = this.apiUrl + "api/myApi/download/" + Id;
return this.http.get(url, { responseType: "blob" });
}
Web API服务
[HttpGet("download/{DocId}")]
public async Task<HttpResponseMessage> GetDocument(string docId)
{
var docDetails = await _hoaDocs.GetDocumentDetails(docId).ConfigureAwait(false);
var dataBytes = docDetails.Stream;
var dataStream = new MemoryStream(dataBytes);
var response = new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK,
Content = new StreamContent(dataStream)
};
response.Content.Headers.ContentDisposition = …将Angular Universal与使用动态内容的页面一起使用时,无法使SSR正常工作.所有其他页面都有效,动态页面返回HTML但不包含动态数据.
方法叫:
ngOnInit() {
const div = this.renderer.createElement('div');
const texttest = this.renderer.createText('this works');
this.renderer.appendChild(div, texttest);
this.renderer.appendChild(this.content.nativeElement, div);
this.createLinkForCanonicalURL();
// The HTML never shows, the method works fine.
this._contentfulService.getBlogPosts().then(posts => {
this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
});
}
服务方式
getBlogPosts(query ? : object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
content_type: CONFIG.contentTypeIds.blogPosts
}, {
'fields.private': false
}))
.then(res => res.items);
}
模板:
这从未在源中显示.
<li class="blog-post" *ngFor="let post of blogPosts">
<h1>{{post.fields.title}}</h1>
</li>
尝试过入门套件并且它们无法调用相同的方法.还尝试使用render2注入和解析器服务来测试在加载之前获取数据.
似乎什么都没有用？
任何帮助,将不胜感激!
编辑
这是我的server.ts文件
// These are important and needed before …angular6 ×10
angular ×6
rxjs6 ×2
typescript ×2
angular5 ×1
javascript ×1
ngxs ×1
node.js ×1
rxjs ×1
ssr ×1
unit-testing ×1