小编Fel*_*lix的帖子

如何在我的项目中使用 Chrome 调试 Angular *ngIf 结构指令?

我想将 Angular 源代码/源映射附加到我生成的 Angular CLI 项目中,以便我可以像*ngIf在 Chrome 中一样调试指令。

是否可以以某种方式将调试器附加到ng_if.ts使用某些 angular.json 配置/源映射...?或者是否有一个设置可以在开发模式下添加源映射,以便我可以单步执行任何带有源映射的第三方库?

在此输入图像描述

如果我在Chrome中按Ctrl+O然后输入,ngIf或者ng_if列表菜单中没有这样的文件。

在此输入图像描述

编辑:提供供应商源映射时的样子(请参阅接受的答案):

在此输入图像描述

debugging webstorm source-maps angular

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

Angular Ivy 类型检查:类型“SafeHtml”不可分配给类型“string”

切换到Ivy 编译器后出现Typescript 错误

[Step 4/5] src/app/app.component.html(1,26): Type 'SafeHtml' is not assignable to type 'string'.
Run Code Online (Sandbox Code Playgroud)

在 Angular 类中,有一个成员属性声明为SafeHtml

@Component({
  selector: 'app',
  template: `<div [innerHTML]="description"></div>`
})
export class AppComponent {
  description: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}

  ngOnInit(): void {
    this.description = this.sanitizer.sanitize(SecurityContext.HTML, '<strong>whatever comes from server</strong>');
  }
}
Run Code Online (Sandbox Code Playgroud)

我的问题是如何转换SafeHtmlSafeUrl字符串?就这样就.toString()OK了吗?

AngularsSafeHtml声明为:

/**
 * Marker interface for a value that's safe to use as HTML.
 *
 * @publicApi
 */
export …
Run Code Online (Sandbox Code Playgroud)

typescript angular angular-ivy

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

如何使用JMX在Wildfly 8.2.0中获取打开的HTTP连接?

我需要从Wildfly/Undertow获取一些指标,特别是开放/最大HTTP连接和使用的线程,并将其与开放数据库连接计数相关联,我可以使用jboss-cli读取:

/subsystem=datasources/data-source=ExampleDS/statistics=pool:read-resource(recursive=true,include-runtime=true)
Run Code Online (Sandbox Code Playgroud)

有没有办法在Wildfly 8.2中获取HTTP连接统计信息?

connection wildfly wildfly-8

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

带选择的角材料表 - 主切换应首先取消选择

我修改了 ( masterToggle) 原始的Angular Material Table 示例- Stackblitz,以便在选择了一些行后,主切换应该取消选择所有(而不是全选 - 类似于 Gmail 行为)。

它有效,但标题中的主切换复选框无法按预期工作 - 单击它取消选择后 - 逻辑取消选择所选行,但主切换复选框不反映模型值:

[checked]="selection.hasValue() && isAllSelected()"

如果表达式的计算结果为 false,我希望主切换复选框不会被选中(见下图)。

我想这与动画有关。

此处修改示例:Stackblitz

masterToggle() {
    // if there is a selection then clear that selection
    if (this.isSomeSelected()) {
      this.selection.clear();
    } else {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
    }
}
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

typescript angular-material angular

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

如何在 Angular 中测试 form.valueChanges?

如何正确地进行单元测试(Karma、Jasmine),即valueChanges发送FormUpdated动作的emmissions ?

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [...],
    providers: [
      { provide: Store, useValue: MOCK_STORE },
    ],
    declarations: [FormComponent],
    schemas: [NO_ERRORS_SCHEMA]
  })
    .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(FormComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});
Run Code Online (Sandbox Code Playgroud)
export class FormComponent implements OnInit {
    searchForm: FormGroup;

    constructor(private readonly fb: FormBuilder, private readonly store: Store<AppState>) {
    }

    ngOnInit(): void {
        this.searchForm = this.fb.group({});
        this.searchForm.valueChanges.subscribe(value => this.store.dispatch(new FormUpdated(value)));
    }
}
Run Code Online (Sandbox Code Playgroud)

我试过这样的事情:

it('should dispatch action for valueChanges', () => {
    const spy …
Run Code Online (Sandbox Code Playgroud)

karma-jasmine angular angular-reactive-forms

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

带有模拟结构指令的 Angular 测试组件失败

我正在尝试在组件测试中模拟结构指令,但出现错误。

以下测试失败并显示一条消息:

嵌入模板上的任何指令都未使用属性绑定 appSome。确保属性名称拼写正确,并且所有指令都列在“@NgModule.declarations”中。("[错误 ->] 测试

我嘲笑结构指令SomeDirectiveSomeMockDirectiveapp.component.spec.ts中定义。测试失败

如果我切换声明使其包含SomeDirective-测试通过

我想知道为什么我不能让它与模拟版本一起工作。

模板:

<h1 *appSome="true">TEST</h1>
Run Code Online (Sandbox Code Playgroud)

指令(生产种类:)):

@Directive({
  selector: '[appSome]'
})
export class SomeDirective implements OnDestroy {
  show: boolean;
  ...
}


Run Code Online (Sandbox Code Playgroud)

测试:

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { Directive, NO_ERRORS_SCHEMA } from '@angular/core';

@Directive({
  selector: '[appSome]'
})
export class SomeMockDirective {}

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [AppComponent, SomeMockDirective], // test is …
Run Code Online (Sandbox Code Playgroud)

angular-directive angular angular-test

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

模块 es2015 与 es2020 之间的区别

module tsconfig 中的es2015es2020选项有什么区别?

换句话说,如果我使用es2015 模块并将module选项配置为 es2015 或 es2020,有什么区别吗?

ts-配置:

{
/* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
  module: 'es2015'
}
Run Code Online (Sandbox Code Playgroud)

{
  ...
  "module": "es2020"
  ...
}
Run Code Online (Sandbox Code Playgroud)

我不想要这种targetlib差异。

typescript es6-modules

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