小编nas*_*h11的帖子

如何使用角材料在具有可扩展行的表格中创建嵌套垫表

我有以下数据

[
    {
        "_id": "c9d5ab1a",
        "subdomain": "wing",
        "domain": "aircraft",
        "part_id": "c9d5ab1a",
        "info.mimetype": "application/json",
        "info.dependent": "parent",
        "nested": [
            {
                "domain": "aircraft",
                "_id": "c1859902",
                "info.mimetype": "image/jpeg",
                "info.dependent": "c9d5ab1a",
                "part_id": "c1859902",
                "subdomain": "tail"
            }
        ]
    },
    {
        "_id": "1b0b0a26",
        "subdomain": "fuel",
        "domain": "aircraft",
        "part_id": "1b0b0a26",
        "info.mimetype": "image/jpeg",
        "info.dependent": "no_parent"
    }
]
Run Code Online (Sandbox Code Playgroud)

这里 if "info.dependent": "parent"then 它是嵌套的,如果"info.dependent": "no_parent"then 它没有孩子。我试图创建一个动态表,但我被困在如何使用嵌套表使其可折叠/可扩展。这是我在stackblitz 上的代码。

<mat-table class=" mat-elevation-z8" [dataSource]="dataSource">

    <ng-container [matColumnDef]="col" *ngFor="let col of displayedColumns">
        <mat-header-cell *matHeaderCellDef> {{ col }} </mat-header-cell>
        <mat-cell *matCellDef="let element"> …
Run Code Online (Sandbox Code Playgroud)

html javascript typescript angular-material angular

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

Angular 单元测试表单验证

我正在学习 angular 8,并且正在使用 Karma 进行单元测试。我创建了一个可以正常工作的基本注册表单,但我在测试中遇到了问题。

经过测试,我遇到了 2 次失败

RegisterComponent > 表单应该是有效的错误:预期验证器返回 Promise 或 Observable。

RegisterComponent > 应该调用 onSubmit 方法错误::预期是间谍,但得到了 FormGroup({validator: Function, asyncValidator: null, _onCollectionChange: Function, Pristine: true, touch: false, _onDisabledChange: [ ], controls: Object({ name: FormControl({validator: Function, asyncValidator: null, _onCollectionChange: Function, pristine: true, touch: false, _onDisabledChange: [ Function ], _onChange: [ Function ], _pendingValue: '', value: '', status: 'INVALID' , 错误: Object({ required: true }), valueChanges: EventEmitter({ _isScalar: false, Observers: [ ], closed: false, isStopped: false, hasError: false, throwError: …

forms validation unit-testing angular

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

如何自动调整文本区域的大小以适应内容?

我正在尝试自动调整大小textarea 以使其适合其中的内容,但是在单击 Enter 以继续下一行后,我遇到了口吃问题。我怎样才能解决这个问题?

这就是我想要做的,见下图。 在此处输入图片说明

有关 StackBlitz 示例,请参阅此链接

代码

this.form.valueChanges.subscribe(() => {
   const textarea = this.myDiv.nativeElement;
   textarea.addEventListener('keydown', function() {
       setTimeout(() => {
           this.style.cssText = 'height:auto; padding:0';
           this.style.cssText = 'height:' + this.scrollHeight + 'px';
       }, 0);
   });
});
Run Code Online (Sandbox Code Playgroud)

html javascript css textarea angular

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

如何在水平角垫桌上添加静态内容?

我更改了mat-table中的direction列,之后无法将ng-container添加到表中。我是这样做的。在这种情况下,如何在我的内容中添加预定义的行?

component.ts

export class MyComponent implements OnInit {
    displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'actions'];
    dataSource = ELEMENT_DATA;
    fourthFormGroup: FormGroup;
    displayColumns: string[];
    displayData: any[];

    constructor(
        private _formBuilder: FormBuilder
    ) { }

    ngOnInit() {
        this.displayColumns = ['0'].concat(this.dataSource.map(x => x.position.toString()));
        this.displayData = this.displayedColumns.map(x => this.formatInputRow(x));
        this.fourthFormGroup = this._formBuilder.group({});
    }

    formatInputRow(row) {
        const output = {};

        output[0] = row;
        for (let i = 0; i < this.dataSource.length; ++i) {
            output[this.dataSource[i].position] = this.dataSource[i][row];
        }

        return output;
    }
}
Run Code Online (Sandbox Code Playgroud)

component.html

<table mat-table …
Run Code Online (Sandbox Code Playgroud)

typescript angular-material angular mat-table angular8

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

Angular 8 对等依赖关系混乱

我正在使用 Angular 8,并且不断收到有关 Angular/compiler-cli 对等依赖关系的 npm 警告。

npm WARN @angular/compiler-cli@8.1.2 需要 @angular/compiler@8.1.2 的同级,但没有安装。您必须自己安装对等依赖项。

但是,如果我执行 a npm install @angular/compiler@8.1.2,npm 会继续抱怨相同的消息。

@angular/compiler@^8.0.0 安装在 dependency 下的 package-json 下,而 '@angular/compiler-cli@^8.1.2 和 @angular/compiler@^8.1.2 安装在 devDependencies 下。

这对我来说没有任何意义。

有谁知道如何生成提供更多信息的错误消息?

或者至少如何解决这种类型的 npm 不一致问题?

npm angular

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

如何在 mat-stepper 中显示最后一个 mat-step 已完成?

好的。我不敢相信我是第一次就一些本来应该很容易完成的事情提出问题,但我们已经到了。

我希望我的 mat-h​​orizo​​ntal-stepper 中的最后一步在单击特定按钮后显示复选标记图标和绿色背景,就像之前步骤的图标一样。该按钮就是下图中的“是,确认”按钮。

确认页面

单击后,我希望带有数字 3 的蓝色图标变为我之前描述的复选标记图标,表明所有步骤现已完成。步骤 1 和 2 会自动执行,因为一旦按下标记为“matStepperNext”的按钮,似乎“mat-step-icon-state-done”类就会应用于它们。遗憾的是,步骤 3 没有这样的按钮,因此必须手动完成。

现在,我已经尝试了与此相关的搜索中可能出现的所有内容。许多帖子建议使用自定义图标,并使用 状态<ng-template></ng-template>,但这并没有奏效。其他人建议用 标记该步骤completed=true; editable=false;,但这仅在移至下一步时才有效,这意味着它不适用于最后一步。我的假设是,必须有某种方法以某种方式将“mat-step-icon-state-done”类添加到 mat-icon 中,但我不太确定如何去做。另外,如果我的预感完全错误,请随时为我指出正确的方向。

angular-material angular mat-stepper

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

angularjs 中的日期范围选择器

任何人都可以推荐一些带有 angularjs 的好的日期范围选择器,它也可以在没有范围的情况下工作吗?那么,在不同的用例中灵活使用和可定制?

datepicker angularjs angularjs-1.5 bootstrap-daterangepicker

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

输入模糊时隐藏弹出窗口,除非单击弹出窗口

我有以下用例:

有一个input,应该旁边时,它具有焦点的输入来显示弹出。因此,当input具有焦点时,用户可以输入input或使用弹出窗口来选择某些内容。

用户完成后,他可以通过单击其他位置或按 Tab 键并聚焦下一个元素来取消对元素的聚焦。但是,如果他单击弹出窗口内的按钮,弹出窗口应保持打开状态,输入应保持聚焦,以便用户可以继续键入。

我遇到的问题是,(click)在弹出窗口中处理输入之前,角度处理(模糊)。这意味着当用户在弹出窗口中点击时,输入失去焦点,它被隐藏,然后用户的点击将不再被处理。

我为这个问题制作了一个stackblitz-demo

这是源代码:

应用程序组件.html

<h1>Hello</h1>
<p>
    Type 'one', 'two' or 'three' to change number or select a number
    from popup.
    <br>
    <input type="checkbox" [(ngModel)]="hideHelperOnBlur" /> Hide
    helper on blur (if this is set, then the buttons in the popup don't work
    but if this is not set, the popup doesn't close if the input looses
    focus -> how can I get both? The buttons to …
Run Code Online (Sandbox Code Playgroud)

javascript events focus blur angular

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

TypeError:将循环结构转换为 JSON 属性“名称”会关闭循环

我在 Angular 8 中使用反应式表单将数据插入数据库,但收到此错误TypeError: Converting circular structure to JSON。据说name财产是一个循环结构,我无法找出原因。谁能帮我吗?提前致谢。

我的组件.ts

export class AddMainCategoryComponent implements OnInit {
    nm;
    desc;
    date;

    get name() {
        return this.addMCform.get('name')
    }

    get description() {
        return this.addMCform.get('description')
    }
    constructor(public mainCategoryService: MainCategoryService, private fb: FormBuilder) { }

    addMCform = this.fb.group({
        name: ['', [Validators.required, Validators.minLength(3)]],
        description: ['']
    })

    ngOnInit() {
    }

    addMain_categories() {
        let main_category = {
            nm: this.name,
            desc: this.description,
            date: new Date(),

        }
        this.mainCategoryService.addMain_categories(main_category).then(data => {
            console.log(data);
        })
    }
}
Run Code Online (Sandbox Code Playgroud)

html

<div class="container-fluid"> …
Run Code Online (Sandbox Code Playgroud)

angular angular-reactive-forms

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

如何在模板中动态生成组件

我编写了一个自定义的 svelte 组件。现在,我想使用 javascript 在另一个类中创建该元素。我怎样才能做到这一点?以下是我想让它工作的代码:

<script>
    import component2 from "./Component2.svelte";

    function abc() {
        var element = document.createElement("component2");
        document.getElementById("abc").appendChild(element);
    }
</script>

<div id="abc" use:abc>dsaads</div>
Run Code Online (Sandbox Code Playgroud)

这是一个工作示例

任何帮助都会很棒。

javascript svelte

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