标签: angular8

将材质模块导入 Angular 8 项目的最佳方法是什么？是通过将material.module.ts导入到app主模块然后在其他模块中使用它：

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

还是直接导入各个模块中主要用到的材质模块？

例如，如果我只使用mat-cardin ProductsModule，我只需导入MatCardModule产品模块并完成它。

我有 2 个文本区域，如果用户输入或插入值，还需要更新其他文本区域字段。

我可以使用change该函数来做到这一点，但我尝试使用带有控件名称的 ng-model 。出现错误。如何解决这个问题？或者我们不能使用 ngmodel 来收集控件名称吗？

这是我的文本区域：

<textarea name="control-name" [(ngModel)]="control_name_text" formControlName="ControlName"  [ngModelOptions]="{standalone: true}" cols="85" rows="5" placeholder="Enter Control Name"></textarea>

另一个：

<textarea name="pageUrl" [value]="control_name_text"  cols="85" rows="5" placeholder=""></textarea>

control_name_text我也在 ts 文件中声明了- 。得到错误为：

Can't bind to 'ngModelOptions' since it isn't a known property of 'textarea'.

有什么帮助吗？提前致谢。

我只是避免了这个问题，直到最近当我更改以前代码的一些位和部分时，才注意到这个特定的错误。

我使用 Angular 8、NodeJS、express 和 mongoose

每当我尝试传递特定对象或该对象的一部分时，我都会收到此错误（来自 chrome 控制台）：

HttpErrorResponse {headers: HttpHeaders, status: 201, statusText: "Created", url: "http://localhost:3200/users/", ok: false, \xe2\x80\xa6}\nerror: {error: SyntaxError: Unexpected token U in JSON at position 0 at JSON.parse (<anonymous>) at XMLHtt\xe2\x80\xa6, text: "Updated successfully!"}\nheaders: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: \xc6\x92}\nmessage: "Http failure during parsing for http://localhost:3200/users/"\nname: "HttpErrorResponse"\nok: false\nstatus: 201\nstatusText: "Created"\nurl: "http://localhost:3200/users/"\n__proto__: HttpResponseBase\n

这是错误对象内部：

message: "Unexpected token U in JSON at position 0"\nstack: "SyntaxError: Unexpected token U in JSON at …

我有ASP.Net Core 2.1 API。如下所示。

[HttpPost]
public async Task<IActionResult> Post([FromBody]string email) {

}

当从邮递员调用时，我必须如下调用上述 API，并将标头设置为Content-Type = application/json

从应用程序调用相同的 API 时 Angular 8。

public send(email: string) {
   //other tried option #1 let obj = JSON.stringify(email);
   //other tried option #2 let obj = this.http.post(API.Url, {email});
   /other tried option #3 let obj = 

   return this.http.post(API.Url, email).pipe(
      retry(2)
   );
}

这引发了以下错误：-

415 不支持的媒体类型；

如果调用已更新标头：-

/* httpOptions = new HttpHeaders({
    'Content-Type': 'application/json'
}*/
public send(email: string) {
 return this.http.post(API.User, email , httpOptions).pipe( …

我在 Angular 应用程序中使用devExtreme UI 框架。

在文档中我找到了如何设置focus它说使用method focus()

但没有重点DxTextBoxComponent

如何设定焦点？

我的代码是：

@ViewChild("name", { static: false }) public inputName: DxTextBoxComponent;

  ngAfterViewInit() {
    this.inputName.instance.focus();
  }

HTML 是：

<dx-text-box #name>

没有效果

目标：

我试图在每个 ajax 调用上显示一个加载图标。为此，我添加了一个 HTTP 拦截器，该拦截器在一个或多个请求正在进行时将变量设置为 true，在所有请求完成时将变量设置为 false。UI 会测试该值并显示是否显示加载程序，具体取决于。

问题：

每次 ajax 调用时，都会引发错误：

ExpressionChangedAfterItHasBeenCheckedError: 
Expression has changed after it was checked. 
Previous value: 'ngIf: [object Object]'. Current value: 'ngIf: true'.

具有可重现错误的简化 Stakckblitz：

https://stackblitz.com/edit/angular-h4rpfb

代码：

应用程序组件.html：

<p *ngIf="loaderService.isLoading | async">
  Loading!
</p>
<p *ngIf="!(loaderService.isLoading | async)">
  Not Loading!
</p>
<button (click)="loadSomething()">Load Something</button>
{{matches|async}}

应用程序组件.ts：

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { LoaderService } from "./core";
import { Observable } from "rxjs";

@Component({
  selector: "my-app", …

我们想要测量 Angular 8 应用程序代码覆盖率。我们有一个用 selenium java 编写的 e2e 测试用例，它加载部署在浏览器中另一台机器上的 Angular 应用程序，并运行一些 e2e 测试用例集。问题是我如何测量 Angular 应用程序 javascript 代码覆盖率。

在高层，我可以想到一些使用 istanbul 来检测我的 Angular JavaScript 代码的机制。Istanbul 将通过在浏览器中加载应用程序来记录 selenium java 代码执行 e2e 测试用例时的代码覆盖率。

寻找详细步骤我如何做同样的事情。

假设我的 Angular 组件中有以下 HTML

<div name='my-name'>
  something
</div>

在我的测试用例中，如何name='my-name'使用属性按属性获取上述元素ComponentFixture？

我有一个函数返回一个承诺并调用另一个函数，该函数将回调作为参数，但我无法弄清楚如何模拟回调函数或调用它的函数。

我试图模拟的函数是来自我正在注入的服务的“listenOnAMessageWithCallBack”，我还想模拟它调用的回调函数。

我的实现：

  async getUsername(): Promise<string> {
    return await new Promise<string>((resolve, reject) => {
      try {
        this.electronController.sendMessage('userName');
        let cb = (event, username) =>{
          this.username = username;
          let user = this.stripDomain(this.username);
          resolve(user);
        };
        this.electronController.listenOnAMessageWithCallBack('catchUser', cb); 
      } catch (err) {
        reject(err);
      }
    })
  }

我的测试如下：

  it('testing function with callback', async() => {
    const stripDomain = spyOn(service, 'stripDomain').and.callFake(()=>{
      service.username = service.username.split('\\').reverse()[0];
      return service.username;
    });
    let cb = (event, username)=>{Promise.resolve('username')}
    spyOn(electronController, 'listenOnAMessageWithCallBack').withArgs('message').and.callFake(()=>{});
    let username = await service.getUsername();
    expect(username).toBe('username');
    expect(stripDomain).toHaveBeenCalledTimes(1);
  });

运行测试时出现以下错误： Spy 'listenOnAMessageWithCallBack' 收到带有参数 …

我想取消 Angular 8 中 RXJS 效果中发出的 http 请求。

@Effect() getReport$ = this.action$.pipe(
ofType(ActionTypes.GET_WIDGET),   
map(toPayload),
mergeMap(payload => {
  return this.dashboardService.getReport(payload).pipe(
    map(this.extractData),
    switchMap(result => {
      return observableOf(<ReceivedWidgetAction>{
        type: ActionTypes.RECEIVED_WIDGET,
        payload: result
      });
    }),
    catchError((err: Response | any) => {
      return this.handleReportError(err);
    }));
    
}));

请让我知道如何使用 Angular 8 执行相同操作。另请注意，我将无法使用切换映射，因为多个 Angular 组件将使用不同的有效负载调用此操作。