小编Ser*_*gey的帖子

角度测试无法读取未定义的属性“名称”

我有一个 ModalComponent,它通过 @Input 接受来自父级的一些属性。

这会导致测试出现问题

类型错误:无法读取未定义的属性“名称”

名称在 ngOnInit 中使用,应该来自@Input displayeddata.

我如何在我的单元测试中通过它?

目前我的测试看起来如此

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [ModalComponent, FilterComponent],
            imports: [ReactiveFormsModule, TranslateModule]
        })
            .compileComponents();
    }));

    beforeEach(async () => {
    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    component.displayeddata = {
        name: 'One component',
        caption: 'Caption',
        componentName: 'TextareaComponent'
    };
    fixture.detectChanges();
});

it('should create', async () => {
    fixture.detectChanges();
    fixture.whenStable().then(() => {
        expect(component).toBeTruthy();
    });
});
Run Code Online (Sandbox Code Playgroud)

这是对我的组件的一项测试,但失败了。

更新 #1

这是我的意思 console.log(this.displayeddata);

Object
caption: "Caption"
component: "TextareaComponent"
name: "One component"
Run Code Online (Sandbox Code Playgroud)

我也稍微改变了我的代码(更新的代码),现在出现了一个新错误 TypeError: Cannot read …

unit-testing karma-runner angular

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

ngx-translate 如何测试组件

我有一个使用这个库的应用程序。我如何用它测试组件?我不想测试库。我只需要开始测试我的组件,而不会出现关于 TranslateModule 然后 TranslateService 然后 TranslateStore 的多个错误......直到我在编译时出现错误。

有没有一种简单的方法可以使用这种依赖来运行我的测试?

再一次,我不想测试这个库(检查字符串是否被翻译)我需要对依赖这个库的组件运行测试。

testing internationalization typescript ngx-translate angular

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

Angular FormArray显示验证错误

我有在FormBuilder的帮助下构建的Angular表单。

窗体包含一个FormArray,其中具有用户想要的多个字段。我已经为字段设置了验证器

this.fb.array([this.fb.control('', Validators.required)])
Run Code Online (Sandbox Code Playgroud)

并且对于每个新的push验证器都是相同的。

问题是我不知道如何访问特定字段的isValid属性,因为它们与FormControlvia 绑定[formControlName]="index"

我已经尝试过这样做,但是似乎没有用

<div *ngIf="array.at(index).invalid" class="alert alert-danger p-2">
</div>
Run Code Online (Sandbox Code Playgroud)

arrayformArray.controls从父通过。

更新#1

有一种情况https://stackblitz.com/edit/angular-7ppkoh

forms validation typescript angular angular2-form-validation

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

Angular markForCheck 与 detectChanges

我将从我在 StackOverflow 上看到一个类似问题的概念开始这个问题,但那个问题只回答了差异

我要问的是我应该根据情况使用什么以及一种或另一种方法可能有哪些缺点

我知道detectChanges在一个元素及其子元素上运行即时更改检测周期,同时markForCheck只将当前元素及其祖先标记为脏,并且应该在下一个更改检测周期中检查它们。

我问这个主要是因为我觉得我不应该总是markForCheck在异步调用中使用。

例如,我有一个InputComponent它是常规 HTML 输入的包装器。这InputComponentChangeDetectionStrategy.OnPush启用。

当我对服务器进行异步调用并获取数据时,我需要对其运行更改检测InputComponent以更新选项列表,我有两个选项。

首先(我觉得我应该使用的)是detectChanges因为它只会对这个确切的组件应用检查,同时markForCheck会导致检查整个树枝。

那么我应该使用什么,我需要使用markForCheck什么,为什么?

performance typescript angular angular-changedetection

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

Angular 5 + Popper.JS

我正在尝试启动需要Popper.Js功能的培训项目.但是,它似乎并没有让我开始使用Popper.Js.

根据Bootstrap的文档,我开始使用Popper.Js

$(function () {
  $('[data-toggle="tooltip"]').tooltip();
});
Run Code Online (Sandbox Code Playgroud)

我在主要组件中使用它ngOnInit.但是,它不起作用.发生错误" 属性'工具提示'在类型'JQuery'上不存在 ".我导入了jquery和bootstrap包文件.安装所有库的类型.

我也试过纯粹的"popper.js"而不是bootstrap.bundle.js.但是会发生同样的错误.Bootstrap.bundle.js(包括正确顺序的bootstrap和popper.js)和jquery在angular-cli.json中导入.

javascript twitter-bootstrap typescript angular angular5

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

Laravel 多域来源 CORS

我希望在我的 laravel 中允许两个用于 CORS 的域能够在本地和服务器上使用它,因此我不想将我的应用程序暴露给任何域。这就是我现在所拥有的

public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', 'http://localhost:4200')
//            ->header('Access-Control-Allow-Origin', 'http://api.example.com')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
            ->header('Access-Control-Allow-Headers', 'Content-Type');
    }
Run Code Online (Sandbox Code Playgroud)

我既不能像我评论的那样,也不能像数组那样做

php cors laravel dingo-api

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

Angular 测试在初始化之前无法访问 Service

我无法启动测试,因为它们一开始就因错误而失败

Chrome 83.0.4103.61 (Linux x86_64) ERROR
  An error was thrown in afterAll
  Uncaught ReferenceError: Cannot access 'SomeService' before initialization
  ReferenceError: Cannot access 'SomeService' before initialization

... stack trace
Run Code Online (Sandbox Code Playgroud)

事情是:

a) 这是一个单例服务并且providedIn: 'root'

b)堆栈跟踪指向任何地方(它甚至包括完全注释掉的测试文件,因此没有一行代码。

c) 因此其他测试无法启动

d) 由于测试量太大,我无法开始禁用测试来找到起点。

如何找到可能发生错误的位置以及可能导致此错误的原因?它可以连接到将 Karma、Jasmine 和规范记者更新到其软件包的最新版本吗?我正在使用 Angular 9

unit-testing jasmine karma-runner karma-jasmine angular

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

Laravel 有很多保存

我有两个表来保存数据。其中之一有外键,因此我有一对多的关系。但是,我不明白如何将数据同时保存到两个表中。我有一个查询,其中包含一个表的数据和另一个应附加到第一个表的数据。

这是主要模型

class Site extends Model
{
    protected $fillable = ['path', 'site_link'];

    public $timestamps = false;

    public function features() {
        return $this->hasMany('App\SiteFeature');
    }
}
Run Code Online (Sandbox Code Playgroud)

这是子模型

class SiteFeature extends Model
{
    protected $fillable = ['feature', 'site_id'];

    public $timestamps = false;
}
Run Code Online (Sandbox Code Playgroud)

现在我的控制器看起来像这样

class SiteController extends BaseController
{
    public function index()
    {
        return Site::all();
    }

    public function show(Site $id)
    {
        return $this->response->item($id, new SiteTransformer);
    }

    public function store(Request $request)
    {
        $site = Site::create($request->all());

        return response()->json($site, 201);
    }
Run Code Online (Sandbox Code Playgroud)

我知道它会将其保存为一份数据。我请求你帮助我将数据分成两个表。在文档中,我找到了存储与数据库中现有模型的关系的方法,但是我在创建时没有该模型。

php database laravel dingo-api

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

RxJs 动态 debounceTime 不是动态的

我创建了一个 Angular 指令,该指令应用于输入并以一些延迟(用于搜索)发出其值。

这个代码如下

@Directive({
    selector: '[search-field]'
})
export class SearchFieldDirective {
    @Input() searchFieldValueOutputDelay = 400;

    private _inputObservable$ = new Subject();

    @Output() searchValueUpdated = this._inputObservable$.asObservable().pipe(
        debounceTime(this.searchFieldValueOutputDelay),
        distinctUntilChanged(),
        tap(() => console.log('emit', this.searchFieldValueOutputDelay))
    );

    @HostListener('keyup', ['$event.target.value'])
    onChange(e) {
        console.log("change");
        this._inputObservable$.next(e);
    }
}
Run Code Online (Sandbox Code Playgroud)

问题是searchFieldValueOutputDelay它只在第一次使用,因此它的值为 400 而不是我在输入时提供的值。

<input (searchValueUpdated)="searchCard($event)" [searchFieldValueOutputDelay]="1000" type="search">

rxjs angular

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

Serverless-webpack 不包含 `pg` 包

我正在尝试修改从模板生成的代码aws-nodejs-typescript。我已经安装了typeorm,reflect-metadatapg使用 PostgreSQL 。

他们dependenciespackage.json 在此输入图像描述

webpack 配置是默认配置

const path = require('path');
const slsw = require('serverless-webpack');
const nodeExternals = require('webpack-node-externals');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

/*
This line is only required if you are specifying `TS_NODE_PROJECT` for whatever reason.
 */
// delete process.env.TS_NODE_PROJECT;

module.exports = {
  context: __dirname,
  mode: slsw.lib.webpack.isLocal ? 'development' : 'production',
  entry: slsw.lib.entries,
  devtool: slsw.lib.webpack.isLocal ? 'eval-cheap-module-source-map' : 'source-map',
  resolve: {
    extensions: ['.mjs', '.json', '.ts'],
    symlinks: false,
    cacheWithContext: false, …
Run Code Online (Sandbox Code Playgroud)

node.js typescript webpack typeorm serverless

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