如何使用 Angular 8 中的反应形式一次编辑或添加一行

Question

我有一个数据列表，当我单击行时，所有行都是 editable，当我单击展开行的编辑按钮时，所有行的值都与第一行，但不应该 happen.One 行可以在 table 处编辑 table，当单击展开行中的编辑按钮时，也不应该添加新行。但是我哪里出错了，谁能帮帮我。

演示：

DEMO

TS:

eoEdit(eo) {
    console.log(eo)
    this.eoDetailsList = eo
   this.hideEoView = false;
   this.initEoForm()
  }

HTML:

 <table class="table table-hover accordion-table">
        <thead>
            <tr>
                <th></th>
                <th scope="col" *ngFor="let field of eoListDetails" (click)="sortEoList(field.param)">
                    {{field.displayName}}
                    <i class="{{field.icon}}" aria-hidden="true"></i>
                </th>
                <th scope="col" class="width75"></th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let eo of eoList">
                <tr>
                    <td (click)="editEo(eo)"><a class="accordion-toggle" data-toggle="collapse" href="#row_{{eo.eoid}}"><i
                                class="fas fa-plus-circle"></i></a></td>
                    <td *ngFor="let field of eoListDetails" class="{{field.class}}">
                        {{eo[field.param]}}
                    </td>
                    <td><button class="btn btn-outline-primary btn-table" title="Request Update"><i
                                class="far fa-paper-plane"></i></button>
                        <button type="button" class="btn btn-outline-primary btn-table" title="View Dec Page"><i
                                class="fas fa-eye"></i></button></td>

                </tr>
                <tr>
                    <td colspan="6" class="hidden-row">
                        <div class="accordion-wrapper pt-3 px-3 collapse" id="row_{{eo.eoid}}">
                            <div class="row" *ngIf="hideEoView">
                                <div class="col">
                                    <div class="form-group">
                                        <label for="">Legal Liability Limit - Each Loss <span
                                                class="text-danger">*</span></label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.legalLiabilityLoss}}</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label for="">Legal Liability Limit - Aggregate <span
                                                class="text-danger">*</span></label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.legalLiabilityAggregate}}</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label for="">Deductible - Each Loss <span class="text-danger">*</span></label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.deductibleLoss}}</p>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <label for="">Deductible - Aggregate <span class="text-danger">*</span></label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.deductibleAggregate}}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="row" *ngIf="hideEoView">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="">Update Requested</label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.effectivedate}}</p>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="">Update Received</label>
                                        <p class="form-control-plaintext font-weight-bold">{{eo.updateReceived}}{{eo.updateReceivedHours}}</p>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="!hideEoView">
                            <form *ngIf="eoInfoForm && eoDetailsList" [formGroup]="eoInfoForm">
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">E&amp;O Carrier <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="E&amp;O Carrier" formControlName="eoCarrier">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Policy Number <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Policy Number" formControlName="policyNumber">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Effective Date <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
                                                formControlName="effectiveDate">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Expiration Date <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
                                                formControlName="expirationDate">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Legal Liability Limit - Each Loss <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Legal Liability Limit - Each Loss"
                                                formControlName="legalLiabilityLimitEachLoss">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Legal Liability Limit - Aggregate <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Legal Liability Limit - Aggregate"
                                                formControlName="legalLiabilityLimitAggregate">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Deductible - Each Loss <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Deductible - Each Loss"
                                                formControlName="deductibleEachLoss">
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="form-group">
                                            <label for="">Deductible - Aggregate <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control" placeholder="Deductible - Aggregate"
                                                formControlName="deductibleAggregate">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-6">
                                        <div class="form-group">
                                            <label for="">Update Requested</label>
                                            <p class="form-control-plaintext font-weight-bold">12/19/19 4:19 PM jcargile</p>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="form-group" formGroupName="updateReceived">
                                            <label for="">Update Received</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control onlyDate" placeholder="MM/DD/YYYY"
                                                    formControlName="date">
                                                <input type="text" class="form-control onlyTime" placeholder="hh:mm AM/PM"
                                                    formControlName="time">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col d-flex justify-content-end align-items-end">
                            <div class="form-group">
                                <button class="btn btn-primary min-w100" (click)="eoDetailsList ? saveDetails() : eoEdit(eo)">{{eoDetailsList ? 'Save' : 'Edit'}}</button>
                            </div>
                        </div>
                        </div>

                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>

Answer 1

查看工作 demo

您需要为每一行添加一个标志，并在该行可编辑时将其设置为 true，目前您使用一个公共变量 eoDetailsList 来决定该行是否可编辑，这会影响所有行。

我添加了这两个标志。是的，您需要手动添加

Answer 2

您正在使用通用控制器 eoDetailsList 以确保它是否可编辑。该控制器正在影响您项目中的相关功能。最简单的方法是为每个任务设置控制器，例如 editable: true 或 editable: false。它不会影响整个项目而不是允许您编辑特定行。

如何使用 Angular 8 中的反应形式一次编辑或添加一行

How to edit or add one row at a time using reactive forms in angular8

forms

reactive

angular

angular-reactive-forms