小编Fel*_*Fel的帖子

我创建了一个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的几本书，但没有一本书能清楚地解释它。

谢谢！

我尝试为使用 HttpClient 执行的每个 HTTP 请求设置 10 秒的默认超时。我有一个拦截器可以向标头添加一些值，并且我已经读到要设置超时，您必须使用“超时”RxJS 运算符，如下所示：

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

import { Observable } from 'rxjs/Observable';
import { timeout } from 'rxjs/operators/timeout';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  constructor() {

  }

  intercept (req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    // NOTE: The following 'authToken' and 'user_id' values are obtained through a global service
    const authReq = req.clone({
      headers: new HttpHeaders ({
        'Content-Type':  'application/json',
        'X_TOKEN_AUTH': authToken,
        'X_IDUSER': …

我想保护注册页面免受自动提交，所以我决定尝试 reCaptcha v3。这是一个 Angular 应用程序，我使用ng-recaptcha模块来更轻松地集成。我已经在 Stackblitz 上设置了一个基本示例，因此您可以在线测试它：

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

我有几个疑问/问题：

1. 如果我将有效的 Google 密钥写入app.module.ts文件，当我按下提交按钮时，该this.recaptchaV3Service.execute调用将不执行任何操作。是因为该应用程序不在我在生成 reCaptcha V3 密钥时指定的域中吗？另外，如果我写错了密钥，Google 会抱怨以下错误：

错误：无效的站点密钥或未在 api.js 中加载：

2. 一旦我得到令牌，我该怎么办？我已经阅读了 ng-recaptcha 文档，但我什么也没看到。我的意思是，当我拥有令牌时，我需要做什么来检查它是否有效并发送表格？

提前致谢，

我想将 Twitter 时间线嵌入到 Angular 6 应用程序中，但找不到好的解决方案。这是我尝试过的：

• 将 Twitter 生成的代码从“publish.twitter.com”放入 index.html。
• 安装ngx-twitter-timeline包。我收到这个警告是因为我使用的是 Angular 6 和 RxJS 6，所以我卸载了它：

• 安装ng4-twitter-timeline包。它似乎有严重的漏洞：

我怎么能得到它？提前致谢，

我需要一个 NodeJS 应用程序的基本日志系统，所以我正在用 做一些测试log4js，这似乎是这些情况的标准。我需要将消息打印到控制台和文件，因此我编写了以下代码：

// Logger
var log4js = require('log4js');

log4js.configure({
  appenders: {
    'console': { type: 'console' },
    'file': { type: 'file', filename: 'logs/mailer.log' }
  },
  categories: {
    default: { appenders: ['file', 'console'], level: 'DEBUG' },
  }
});

var logger = log4js.getLogger("Mailer");

logger.info("Starting application");

try {
  // CODE TO READ APP CONFIG FILE
}
catch(e) {
  logger.error("Couldn't read app configuration file (config.yml)");

  // This is the trouble maker. It kills the app without flushing the logs
  process.exit(1);
} …

在Angular 2应用程序中,我正在尝试将方法存储在变量中,但调用它总是会引发错误.我将在下面更好地解释:

我必须调用3种不同的API方法来更新数据库,具体取决于用户的类型:客户,协作者或提供者.这就是我现在所拥有的:

let updateAPIMethod;

switch (user.type) {
    case OBJTYPES.CUSTOMER:
        updateAPIMethod = this.customerService.updateCustomer;
        break;
    case OBJTYPES.COLLAB:
        updateAPIMethod = this.collaboratorService.updateCollaborator;
        break;
    case OBJTYPES.PROVIDER:
        updateAPIMethod = this.providerService.updateProvider;
        break;
}
updateAPIMethod(user).subscribe( (ret) => { DEAL WITH SUCCESS },
    (error) => { DEAL WITH ERROR });

每个函数都是对http.put的调用,返回一个Observable.当我运行上面的代码时,我得到:

TypeError: Cannot read property 'http' of undefined

我认为这是因为只是调用函数并没有设置适当的'this'值,但我不确定...

有办法做我想要的吗？谢谢!

我想知道在路由器出口中插入组件时是否有办法告诉 Angular 生成 DIV 而不是新标签。现在，我有这个组件代码：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-fwc-vpn-main',
  templateUrl: './fwc-vpn-main.component.html',
  styleUrls: ['./fwc-vpn-main.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class FwcVpnMainComponent implements OnInit {

  numbers = new Array(35);

  constructor() { }

  ngOnInit() {
  }

}

在最终的 HTML 中呈现为：

<router-outlet></router-outlet>
<app-fwc-vpn-main class="ng-star-inserted"> ... </app-fwc-vpn-main>

我需要的是生成一个带有一些添加类的 div，所以最终结果将是这样的：

<router-outlet></router-outlet>
<div app-fwc-vpn-main class="grid-y medium-grid-frame"> ... </div>

注意：我需要添加grid-y和medium-grid-frame类，以便应用程序具有正确的布局。这是我想更改此 div 的插入标签的主要原因。

提前致谢，

在Angular应用中，我使用HttpClient和RxJS运算符进行一些API调用。例如：

return this.httpClient.put(url, JSON.stringify(treeOptions))
        .pipe(
        map(this.extractTreeData),
        catchError(this.handleError)
        );

该extractTreeData方法基本上更改了API返回的一些属性：

private extractTreeData(res: any) {
    let apiTree = res.data;  // The tree comes inside the 'data' field
    let newTree : any;

    try {
        let str = JSON.stringify(apiTree);

        str = str.replace(/"children"/g, '"items"');
        str = str.replace(/"allowdrag"/g, '"allowDrag"');

        newTree = JSON.parse(str);        
    } catch(e) {
        // Error while parsing
        newTree = null;
    }

    return newTree || {};
}

我需要根据树的类型进行更多更改。如何将这种类型传递给映射方法？我的意思是：

[...]
.pipe(
  map(this.extractTreeData), <== HOW TO PASS VARIABLE 'treeType' TO extractTreeData
[...]

提前致谢，

我在 Angular 7 应用程序上使用 PrimeNG TurboTable 组件，并且有一个按钮可以向其中添加新行。问题是，当添加新行时，用户必须向下滚动到表格底部才能开始编辑它。我怎么能滚动到它？

这就是我在模板中定义表格的方式：

<p-table [value]="gridOptions" [scrollable]="true" scrollHeight="13em" 
selectionMode="single" [(selection)]="selectedOption" 
(onEditComplete)="onDataChanged($event)"
(onRowReorder)="onDataChanged($event)">
  [ ... ]

</p-table>

这是“添加选项”处理程序：

onAddOption() {
  // This adds a new option to the TurboTable
  this.gridOptions.push({ name: "", arg: "", comment: "", scope: this.scope });

  // I expected that selecting an option would scroll to it, but it doesn't work
  this.selectedOption = this.gridOptions[this.gridOptions.length-1];
}

有任何想法吗？谢谢！