html - 通过 Json Pipe Angular 9 项目显示 ngForm 数据不显示任何数据。将循环结构转换为 JSON 错误

Question

我正在尝试使用 Angular 9 项目中的 Json 管道在 HTML 文件中显示我的 ngForm 数据。

我希望从下面的代码中得到的结果应该是

{"name":"name input","contactNumber":"07123" }

我试过这个:

{{ form.value | json }}

我也试过

{{ form| json }}

显示 全部 angular ngForm 数据，但仍然没有运气。

在我的 HTML 上没有显示任何内容，但如果我这样做 {{form}} , 我得到 [object object] .

注意:FORMS MODULE 是导入的。

我在控制台上遇到的错误:

VM21 vendor.js:15247 ERROR TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'TView'
    |     property 'blueprint' -> object with constructor 'LViewBlueprint'
    --- index 1 closes the circle
    at JSON.stringify (<anonymous>)
    at JsonPipe.transform (VM21 vendor.js:5866)
    at Module.ɵɵpipeBind1 (VM21 vendor.js:43023)
    at BookingFormComponent_Template (VM20 main.js:579)
    at executeTemplate (VM21 vendor.js:20324)
    at refreshView (VM21 vendor.js:20171)
    at refreshComponent (VM21 vendor.js:21609)
    at refreshChildComponents (VM21 vendor.js:19900)
    at refreshView (VM21 vendor.js:20223)
    at refreshComponent (VM21 vendor.js:21609)

HTML代码:

<form #form="ngForm" class="box p-4 mx-lg-0 mx-1 mb-3 rounded font-weight-bold">
<div class="form-group">
<label for="clientName">Name</label>
<input id="clientName"  placeholder="Enter your name!" ngModel/>
</div>
<div class="form-group">
<label for="contactNumber">Contact Number</label>
<input id="contactNumber"  placeholder="Enter your contact number!" ngModel/>
</div>
<h3>{{ form | json }}</h3>
<h3>{{ form.value | json }}</h3>

Answer 1

为了解决圆形对象错误，我的回答基于 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value#Examples
，您需要添加一个名为的自定义管道:circular-object-to-json.pipe.ts 并添加代码:

import { Pipe, PipeTransform } from '@angular/core';

    @Pipe({ name: 'circularObjectToJsonPipe' })
    export class CircularObjectToJsonPipe implements PipeTransform {
        transform(circularObj: any): any {

            const getCircularReplacer = () => {
                const seen = new WeakSet();
                return (key, value) => {
                    if (typeof value === "object" && value !== null) {
                        if (seen.has(value)) {
                            return;
                        }
                        seen.add(value);
                    }
                    return value;
                };
            };

            return JSON.stringify(circularObj, getCircularReplacer());
        }
    }

不要忘记将新管道添加到 app.module.ts 中的声明数组:

@NgModule({
    declarations: [
        CircularObjectToJsonPipe,
    ],

重写你的表格:

<form
    #form="ngForm"
    (ngSubmit)="onSubmit(form.value)"
    class="box p-4 mx-lg-0 mx-1 mb-3 rounded font-weight-bold"
>

    <div class="form-group">
        <label for="clientName">Name</label>
        <input
            name="clientName"
            ngModel
            placeholder="Enter your name!"
        />
    </div>

    <div class="form-group">
        <label for="contactNumber">Contact Number</label>
        <input
            name="contactNumber"
            ngModel
            placeholder="Enter your contact number!"
        />
    </div>

    <button type="submit">Submit</button>

    <pre style="font-size: 1rem; white-space: pre-wrap;">{{ form | circularObjectToJsonPipe }}</pre>

    <h3>{{ form.value | json }}</h3>

</form>

并在你的 component.ts 中添加 onSubmit 函数:

onSubmit(formValues) {
    console.log(formValues);
}