如何防止Angular在(click)事件后重置Text Area值?

时间:2018-03-19 13:08:02

标签: html json angular

我从服务器收到一些原始JSON,其中包含从PDF中提取的数据,下面是JSON的摘录。

{
"ServiceOfSuit": {
    "text": "This insurance shall be governed by and construed in accordance with the Revised Code of Washington (RCW). Each party agrees to submit to the exclusive jurisdiction of any competent court within the United States of America.\n\nNMA 1998 (24/04/86) Service of Suit Clause: A.N.O. Attorneys (or their Nominees) 211 Main St\n\nOlympia\n\nWashington (WA) 99999, USA"
},
"RecordingTransmittingAndStoringInformation": {
    "text": "Where Broker XYZ maintains risk and claim\n\ndata/information/documents Broker XYZ may hold\n\ndata/information/documents electronically."
},
"NoticeOfClaims": {
    "text": "This insurance shall be governed by and construed in accordance with the Revised Code of Washington (RCW). Each party agrees to submit to the exclusive jurisdiction of any competent court within the United States of America.\n\nNMA 1998 (24/04/86) Service of Suit Clause: A.N.O. Attorneys (or their Nominees) 211 Main St\n\nOlympia\n\nWashington (WA) 99999, USA"
}}

我的计划是创建一个表单,其中文本将位于文本区域内,标签将成为关键。因此,允许某人编辑该值,然后保存它,更新JSON。我设法使用下面的代码用HTML做。其中 originalRules 包含原始JSON和是一个管道,它可以帮助我遍历JSON并返回键和值。

<ng-container *ngFor="let rule of originalRules | keys">
    <ng-container *ngIf="rule.value.text">
        <label style="display: inline-block" [innerHTML]="rule.key"></label>
        <textarea rows="6" class="input" [id]="rule.eltID" [innerHTML]="rule.value.text"></textarea>
    </ng-container>
</ng-container>

问题

我遇到的问题是,每当我编辑文本区域然后单击页面上的按钮(该按钮甚至可能在单击方法上有空)时,它会重置值。有没有办法可以阻止这种情况?

只是旁注,我知道我可以在打字稿中解析JSON并将其放入数组中,从而更容易迭代并生成文本区域,这确实有效。但是我更喜欢在HTML中完成所有这些工作,因为我有更复杂的场景,我在JSON中有更多嵌套数据,可能是数组,我计划以不同的方式显示。

很抱歉这个问题很长,并提前致谢。

修改

代码的更多相关部分有助于:

管:

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
transform(value, args: string[]): any {
    const keys = [];
    for (const key in value) {
        keys.push({key: key, value: value[key]});
    }
    return keys;
}}

0 个答案:

没有答案