小编Fel*_*Fel的帖子

我正在尝试学习如何使用HttpInterceptor为应用程序对API执行的每个HTTP请求添加几个标头.我有这个拦截器:

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

import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';


@Injectable()
export class fwcAPIInterceptor implements HttpInterceptor {
  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

  const authReq = req.clone({
    headers: req.headers.set('Content-Type', 'application/json')
  });

  console.log('Intercepted HTTP call', authReq);

  return next.handle(authReq);
}
}

}

除了'Content-Type'标题之外,我还需要添加'Authorization',但我不知道怎么做(Angular HttpHeaders的文档只是方法列表,没有任何解释).

我该怎么做？谢谢!

今天我意识到Angular 5中反应形式的意外(对我来说)行为.服务器从应用程序接收一个值为"null"而不是null值的字符串,这就是我想要的.

我做了以下测试:

https://stackblitz.com/edit/angular-rjrspr?file=app%2Fapp.component.html

正如您在下图中所看到的,如果我[value]="null"在select中使用,该字段将获得"null"(字符串文字)作为值.但是,如果我使用[ngValue]="null"它获得预期null值.

我认为使用的value是用于反应形式,而ngValue用于模板驱动的形式.我想知道在我的表格中使用两者是否安全(我总是使用反应形式),如果对不同的行为有任何解释.

谢谢!

我必须调试一个使用 Swagger 开发的 REST API Java 项目。我是新手，所以我对如何做某些事情有点困惑。例如，这是一种方法：

@GET
@Path("/location/name")
@Produces({MediaType.APPLICATION_JSON})
@Operation(
    summary = "Get location information",
    tags = {"Information"},
    responses = {
        @ApiResponse(responseCode = "200", content = @Content(schema = @Schema(implementation = LocationResponse.class)), description = "Get location information"),
        @ApiResponse(responseCode = "500", description = "Error: Internal Server Error")
    }
)
public Response searchLocationByName(
    @Parameter(description = "Location name", required = true) @DefaultValue("Barcelona") @QueryParam("name") String locationName
) { /* METHOD CODE */ }

在@ApiResponse为代码200是不是类型LocationResponse，但类型的ArrayList<LocationResponse>，因为它可以返回多个位置。此更改的正确语法是什么？我一直在https://github.com/swagger-api/swagger-core/wiki/Swagger-2.X---Annotations#operation-annotations阅读文档，但我找不到合适的例子.. .

谢谢！

我想在我的应用程序的几个部分中使用Angular组件,包括在延迟加载的模块中的组件中.我不知道如何声明组件在惰性模块中使用它.我将向您展示不同文件的一些相关部分:

app.module.ts

import { FpgTimeComponent } from './fpgTime/fpg-time.component';


@NgModule({
  declarations: [
      AppComponent, 
      (...)
      FpgTimeComponent

app.routing.ts

const appRoutes: Routes = [

    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    {
        path: 'customer',
        component: CustomerComponent
    },
    {
        path: 'lazy',
        loadChildren: 'app/lazy/lazy.module#LazyModule'
    }
];

lazy.module.ts

import { FpgTimeComponent } from '../fpgTime/fpg-time.component';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
    imports: [routing],
    declarations: [
        LazyComponent, 
        FpgTimeComponent
    ]
})

该应用程序加载,但当我进入惰性路由时,它会抛出以下错误:

未捕获(承诺):错误:类型FpgTimeComponent是2个模块的声明的一部分:AppModule和LazyModule!请考虑将FpgTimeComponent移动到导入AppModule和LazyModule的更高模块.您还可以创建一个新的NgModule,它导出并包含FpgTimeComponent,然后在AppModule和LazyModule中导入该NgModule.

我没有在任何地方导入LazyModule,因为它是懒惰加载的.那么,我如何声明组件FpgTimeComponent能够在惰性模块(以及非惰性组件)中使用它？

提前致谢,

我有一个带有2个控件(port_start和port_end)的反应式表单,它们具有以下要求:

• 两者都必须有价值
• 它们的值必须介于0到65535之间
• port_start值必须小于port_end值

这是我到目前为止所尝试的:

[...]
this.formModel.addControl('port_start', 
  new FormControl(object.port_start ? object.port_start : 0, 
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));

this.formModel.addControl('port_end', 
  new FormControl(object.ort_end ? object.port_end : 0, 
  [Validators.required, Validators.min(0), Validators.max(65535), this.minMaxValidator('port_start', 'port_end').bind(this)]));
[...]

这是自定义验证器功能:

minMaxValidator = function(startControl : string, endControl : string): ValidatorFn {
  return (control: FormControl): {[key: string]: any} => {
    let valid = true;
    let valStart = 0;
    let valEnd = 0;

    if(this.formModel.controls[startControl] && this.formModel.controls[endControl]) {
      valStart = <number>this.formModel.controls[startControl].value;

      valEnd = <number>this.formModel.controls[endControl].value;
    }

    valid = valEnd >= valStart;

    return valid …

在Angular4应用程序中，我使用服务来导出一些在整个应用程序中使用的常量，枚举和接口。我想导出一个字符串数组，其键是anum中的键。这就是我现在所拥有的：

export enum ContextMenus {
  ... (more options)
  OBJECT_COLOR_RED = 120,
  OBJECT_COLOR_GREEN = 121,
  OBJECT_COLOR_BLUE = 122
}

我想基于上面的枚举值导出一个字符串数组，如下所示：

let ObjectStyles : string[];
ObjectStyles[ContextMenus.OBJECT_COLOR_RED] = '#f00';
ObjectStyles[ContextMenus.OBJECT_COLOR_GREEN] = '#0f0'
ObjectStyles[ContextMenus.OBJECT_COLOR_BLUE] = '#00f';

export ObjectStyles; // THIS IS WHAT I DON'T KNOW HOW TO WRITE

我曾尝试export default RulesStyles按照论坛中的建议使用，但是当我尝试从这样的组件中导入它时：

import { ContextMenus, ObjectStyles } from '../app-options.service';

编译器抱怨模块'app-options.service没有导出的成员ObjectStyles'。

另一个建议的解决方案是像这样导出ObjectStyles：

export { ObjectStyles };

在这种情况下，编译器不会抱怨，但是应用程序在运行时崩溃，并显示以下错误：

TypeError: ObjectStyles is undefined

我该怎么办？谢谢！

我有一个 Angular 4 应用程序，它看起来完全不同，具体取决于您使用的浏览器。这是它在 Firefox 58 上的外观示例（这是我希望它的外观）：

这是它在 Chrome 63 上的外观示例：

几天前我打开了一个问题，看看我是否可以解决这个问题（Chrome 和 Firefox 中的不同“div”高度），但我找不到让它在两种浏览器上都能工作的方法。

因此，我正在考虑根据使用 Chrome 或 Firefox 的用户加载不同的 CSS 类。Angular 4+ 有办法找出浏览器吗？然后我要做的是ngClass在组件的模板中加载适当的类，希望可以解决这个问题。

或者有更好的选择吗？

提前致谢，

我创建了一个Angular服务，该服务基本上设置了带有一些用户信息的对象。当我更改用户时，该服务将发出可观察到的信息，并由同级组件捕获以更新信息。问题是我第一次设置数据时，还没有人订阅，所以我得到一个未定义的值。我已经读过有关使用publish（）或share（）将可观察对象转换为“热”对象的信息，但是我对RxJS还是很陌生，但我仍然不了解它在100％的情况下如何工作，所以我有点迷失了。

服务代码（相关部分）：

getFwcUser() : Observable<FwcUser> {
  return this.subjectFwcUser.asObservable();
}

setFwcUser(user : FwcUser) {
  this.fwcUser = user;

  this.subjectFwcUser.next(this.fwcUser);
}

注意：FwcUser是带有某些用户字段的界面。我在按钮处理程序中运行setFwcUser以选择用户。

后期订阅者（组件代码）：

ngOnInit() {
  this.fwcUserService.getFwcUser()
    .subscribe(
      (user : FwcUser) => { console.log('Received: ', user); this.fwcUser = user; }
  );
  [......]
}

始终打印：“已接收：未定义”。注意：该组件位于'* ngIf =“ fwcUser”'内部，因此当我从同级组件调用'setFwcUser'时正在加载该组件。

如何获得该组件以读取丢失的值？

另外，有人可以为初学者推荐一个很好的资源来学习RxJS吗？我正在阅读有关Angular4的几本书，但没有一本书能清楚地解释它。

谢谢！

我有一个 HTML 表，其中一些行被“禁用”。我想向用户清楚地展示它，所以我对 应用了模糊过滤器tr，有一个像这样的表格：

注意：https: //stackblitz.com/edit/angular-cdypks上有一个实例。

问题是，尽管它看起来被禁用，但用户仍然可以与其交互，选择文本并单击选择输入。另外，有些单元格是可放置区域，我可以在其中放置物体，所以我想避免它。

我不想使用Javascript，所以我想知道是否有办法在残疾人tr或类似的东西前面放置一个透明的DIV......

谢谢！

我创建了一个组件来显示带有动态输入的简单模式对话框。这是它的外观示例：

在内部，它使用 PrimeNG 对话框，并且输入控件是从属性中接收的数组动态创建的@Input。这是我创建的表格：

    <form novalidate [formGroup]="formModel">
      <ng-container *ngFor="let field of dialogData.formControls; let i=index">
        <!-- Input field -->
        <div *ngIf="field.type != 'hidden' && field.type != 'button' && field.type != 'separator'">
          <div class="ui-inputgroup">
            <span class="ui-float-label">              
              <!-- Input control -->
              <input *ngIf="field.type != 'textarea' && field.type != 'hidden'" pInputText
                [type]="field.type" [formControlName]="field.name" [name]="field.name"
                (keyup.enter)="checkDialog()" (keyup.esc)="cancelDialog()" [tabindex]="i">

              <textarea pInputTextarea *ngIf="field.type == 'textarea'" [formControlName]="field.name" [name]="field.name" rows="3" #inputField [tabindex]="i"></textarea>

              <label [for]="field.name">
                <i [ngClass]="field.icon"></i>
                &nbsp;
                {{ field.label }}
              </label>                
            </span>                        
          </div>
          <p class="fwc-error" [hidden]="formModel.get(field.name).valid || …