小编Pic*_*cci的帖子

使用 Typescript 和 Serverless Offline 时,VSCode 断点被禁用(灰显)

我正在使用无服务器框架开发一些 Lambda 函数。无服务框架已在全球安装。

我正在使用 Typescript 和 serverless-webpack。

我也在使用 serverless-offline 在本地进行测试。

一切工作正常,除非我尝试从 VSCode 中进行调试。问题是,一旦我从 VSCode 的调试工具启动无服务器离线,所有断点都会变灰。

这是我的配置文件

包.json

{
  "name": "backend-serverless",
  "version": "1.0.0",
  "description": "serverless backend",
  "main": "handler.js",
  "scripts": {
    "test": "mocha -r ts-node/register transform/src/**/*.spec.ts src/**/**/*.spec.ts",
    "tsc": "tsc",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/aws-lambda": "0.0.34",
    "@types/chai": "^4.1.2",
    "@types/mocha": "^5.0.0",
    "@types/node": "^9.6.0",
    "chai": "^4.1.2",
    "mocha": "^5.0.5",
    "serverless-offline": "^3.18.0",
    "serverless-webpack": "^5.1.1",
    "ts-loader": "^4.1.0",
    "ts-node": "^5.0.1",
    "typescript": "^2.7.2",
    "webpack": "^4.3.0"
  }
}
Run Code Online (Sandbox Code Playgroud)

webpack.config.ts

const path = require('path');
const slsw = …
Run Code Online (Sandbox Code Playgroud)

typescript webpack visual-studio-code serverless-framework serverless-framework-offline

5
推荐指数
1
解决办法
8746
查看次数

Angular Material Button 和 RxJS fromEvent 函数 - 没有 nativeElement 属性,只有 _nativeElement 属性

我有一个 Angular 组件,在它的模板中我放置了一个 Angular Material 按钮,即类似<button #myButton mat-button></button>.

现在我想要做的是在我的代码中获取这个按钮,生成一个 Observable,当单击按钮时发出该 Observable 并愉快地对这样的 Observable 做我需要做的任何事情。

第一件事:我使用@ViewChild以下代码抓住按钮

@ViewChild('myButton') myButton: MatButton;
Run Code Online (Sandbox Code Playgroud)

我指定变量的类型,MatButton因为它实际上是那种类型。

最终我的问题。我想使用我通常的方法,即fromEvent(this.myButton.elementRef.nativeElement, 'click')ngAfterViewInit方法中使用。不幸的是我收到一个错误Invalid event target。挖掘了一下我发现它MatButton没有属性,elementRef但它有一个名为_elementRef. 从前导下划线这听起来像是一个私有属性,但我没有找到任何更好的方法来创建一个 Observable,从一个MatButton指令开始并使用fromEventRxJS 的函数。

任何建议将不胜感激。

rxjs angular-material angular

5
推荐指数
1
解决办法
735
查看次数

Typescript - 创建一个对象,通过其名称动态选择该类

我有一个 Typescrip 应用程序,我需要在其中实现代表不同控制逻辑的不同类(例如ControlLogicAControlLogicBControlLogicC)。所有这些类都是同一个抽象超类 ( ControlLogicAbstract) 的扩展。

要应用的控制逻辑是在配置时确定的,因此,在运行时,我唯一知道的是我需要以字符串形式(例如controlLogicClassName)使用的类的名称。

现在问题:

1) 是否可以在 Typescript 中仅从类的名称开始创建类的实例(例如,只知道controlLogicClassName)?

2)是否可以在浏览器环境和节点环境中执行此操作?

3)如果这可以在浏览器环境中完成,旧版本的浏览器(比如IE9及更高版本)是否也支持它?

附加问题:是否可以(在运行时)查询抽象 Typescript 类(例如ControlLogicAbstract)以获取其所有可用子类的列表(在我的示例 ControlLogicA、ControlLogicB 和 ControlLogicC 中)?

提前致谢

typescript

4
推荐指数
1
解决办法
3504
查看次数

Angular2设计 - 组件嵌套和性能风险

当我必须构建一个具有许多功能的复杂页面时,我经常会得到一个设计,它预见复杂页面是一系列更简单组件的组合,这可能也是一个组成更简单的组件(换句话说,我在谈论多个嵌套组件级别).

这些更简单的组件不是为了可重用性而构建的(没有其他页面可以使用它们),而是试图使代码更易于阅读和理解(这仍然是一件好事).

无论如何,我的问题是,预测通过构图和不同嵌套级别构建页面的设计是否可能会严重影响性能,因此需要仔细观察.

我认为这个问题可能听起来有点模糊,但我基本上想知道嵌套组件是否是Angular2应用程序性能的严重风险.我说的是合理数量的嵌套级别(比如3-4级)和功能丰富度不能降低的页面(即不嵌套的页面必须在首页).

我希望这个问题看起来不太天真.

提前致谢

angular

4
推荐指数
1
解决办法
576
查看次数

如何在 Mac 上打开的 VS Code 打开窗口之间导航

我最近在我的 Mac 上将 Visual Studio Code 更新到了新版本 (1.7.2)。我习惯于在不同的项目上同时打开 VS Code 的不同“窗口”。在以前版本的 VS Code 中,我可以通过“cmd+>”(或“cmd+z”,现在我不记得了这一点)来导航 VS Code 打开的窗口。现在这个组合键不再起作用,为了导航窗口,我需要打开“窗口”菜单选项并从那里进行选择。有谁知道如何使用此版本的 VS Code 在 Mac 上打开的 VS Code 打开窗口之间导航?提前致谢

visual-studio-code

4
推荐指数
1
解决办法
1616
查看次数

更改Angular Material的md-slider的默认背景颜色

我使用的md-sliderAngular Material版本2.0.0-beta.8

我选择了indigo-pink主题并将其导入style.css

我对我所拥有的很满意,但我想改变滑块手柄缩略图的背景颜色.

显然,这是由indigo-pink.css文件中定义的以下css代码设置的:

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill{background-color:#ff4081}
Run Code Online (Sandbox Code Playgroud)

事实上,如果我改变了indigo-pink.css,我会得到我想要的东西,但这显然不是正确的方法.

所以问题是改变滑块手柄缩略图颜色的正确方法,并且为了一般性,如何仅更改Angular Material主题中定义的类的某些属性.

angular-material2

4
推荐指数
4
解决办法
1万
查看次数

错误:使用同步 Observable 测试 Angular 组件时的 ExpressionChangedAfterItHasBeenCheckedError

我有一个简单的组件,它使用一个返回 Observable 的服务。此类 Observable 用于通过 控制 html 元素的创建*ngIf

这里的代码

@Component({
  selector: 'hello',
  template: `<h1 *ngIf="stuff$ | async as obj">Hello {{obj.name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent implements AfterViewInit {
  constructor(
    private myService: MyService,
  ) {}

  stuff$;

  ngAfterViewInit() {
    this.stuff$ = this.myService.getStuff();
  }
}


@Injectable({
  providedIn: 'root'
})
export class MyService {
  getStuff() {
    const stuff = {name: 'I am an object'};
    return of(stuff).pipe(delay(100));
  }
}
Run Code Online (Sandbox Code Playgroud)

如您所见,getStuff()返回和 Observable 带有 adelay并且一切都按预期工作。

现在我删除了 …

rxjs angular angular-test

4
推荐指数
1
解决办法
2495
查看次数

展开 Angular Material Tree 的特定节点

我正在使用 Angular Material Tree,我需要根据某些逻辑扩展某些节点。

我从官方 Angular Material 文档中的示例之一开始创建了一个示例。

启动时,页面如下所示 在此输入图像描述

如果我单击“展开水果节点”按钮,我想看到以下渲染

在此输入图像描述

管理按钮点击的代码如下

expandNode() {
    this.nestedNodeMap.forEach((node) => {
      if (node.item === "Fruits") {
        this.treeControl.expand(node);
      }
    });
  }
Run Code Online (Sandbox Code Playgroud)

不幸的是,如果我点击按钮,什么也不会发生。关于如何达到所需行为有什么建议吗?

示例代码可以在这里尝试

angular-material angular

4
推荐指数
1
解决办法
5539
查看次数

MongoDB - 使用nodejs驱动程序运行并行查询,并在上次查询完成时关闭数据库连接

我需要使用node.js驱动程序并行地对MongoDB运行多个查询.

目前我正在使用一个计数器,它会在查询完成时减少.当计数器达到0时,表示所有查询都已完成,然后我关闭数据库连接.

在一个简单的情况下,并行运行2个查询,代码如下

var mongodb = require('mongodb');
var MongoClient = require('mongodb').MongoClient;
var db;

MongoClient.connect("mongodb://localhost:27017/company", function(err, database) {
    if(err) throw err;
    db = database;

    let collection = "resumes";
    let numberOfParallelQueries = 2;
    let result = [];
    let finalCallback = (err, resp) => {
        if (err) throw(err);
        numberOfParallelQueries = numberOfParallelQueries -1;
        result.push(resp);
        if (numberOfParallelQueries == 0) {
            console.log(result);
            db.close()
        };
    }
    db.collection(collection).find({"jobs": {$elemMatch: {"company": "CNA", position: "director"}}}).toArray(finalCallback);
    db.collection(collection).find({$and: [{"jobs.company": "CNA"}, {"jobs.position": "director"}]}).toArray(finalCallback);
});
Run Code Online (Sandbox Code Playgroud)

我的问题是,是否有更优雅的解决方案.我正在考虑一些forkJoin()方法Observable.

提前致谢

mongodb node.js observable

3
推荐指数
1
解决办法
938
查看次数

仅在创建元素后才使用 @ViewChild 获取 html 元素

我有一个 Angular 组件,其模板中有一个 html 元素。我希望能够在某个 Observable 发出任何值时创建该元素。因此我对元素进行了这样的编码

<div #myDiv *ngIf="myObs | async"> this is my div </div>
Run Code Online (Sandbox Code Playgroud)

myObs可观察到的在哪里。

同时我想以编程方式管理这个元素,因此我ViewChild像这样使用

@ViewChild('myDiv') myDiv: ElementRef;
....
ngAfterViewInit() {
  const myNativeElement = this.myDiv.nativeElement;
  doStuffWith(myNativeElement);
}
Run Code Online (Sandbox Code Playgroud)

我的问题是,ngAfterViewInit运行时this.myDiv为 null,并且仅在myObs发出后才创建。

doStuffWith(myNativeElement)我想知道哪种方法是确保仅在this.myDiv实际创建时执行的最佳方法。

这是重现该案例的示例代码

rxjs angular

2
推荐指数
1
解决办法
1137
查看次数