Question

我基本上会生成一个表并将其填充到我的angular 7应用程序中。当用户单击“添加补充信”按钮时，我正在查看的是生成附加列，如屏幕快照所示。例如，它应该在列Class B旁边创建列。我该怎么做。我在表上有添加类按钮，单击它会创建一条记录，并使用包含新记录的最后一个td填充表。现在，我需要单击“添加附带字母”按钮，然后在其旁边创建一列。

或者我可以考虑用另一种方式与现有列一起创建一个附加列并将其隐藏。仅在单击添加副字母按钮时才支持。

我加了一个小提琴 https://jsfiddle.net/76w4zhnu/

html

<style>
    th,
    td {
        padding: 7px;
        min-width: 300px;
        max-width: 300px;
    }


    .fundClassesTable {

        table-layout: fixed;
    }

    .cellbgcolor {
        color: transparent;
    }

    .btn {}

    .tableItem {
        text-align: center;
        border-left: solid 1px lightgrey;
        border-top: solid 1px lightgrey;
        border-right: solid 1px lightgrey;
        border-bottom: solid 1px lightgrey;

    }

    .rowItem:hover {
        background-color: #f5f7f7;
    }


    label {
        margin-left: 0.5rem;
        vertical-align: middle
    }


    .panel-heading {
        color: black;
        /* background-color: #F59850; */
        border-color: #ddd;
        overflow: hidden;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .panel-heading .left-label {
        display: inline-block;
        padding-top: 5px !important;

    }

    .scrollClass {
        overflow-x: scroll;
        display: grid;
    }

    .panel-heading label {
        margin-bottom: 0px !important;
    }
</style>

<table class="fundClassesTable table-striped">
            <tr *ngFor="let c of ColumnNames">
                <ng-container *ngIf="c != ColumnNames[45] && c != ColumnNames[46] && c != ColumnNames[47] || isHurdle;">
                    <th
                        [ngClass]="c != ColumnNames[56] && c != ColumnNames[57] && c != ColumnNames[38]? 'tableItem bold' : 'tableItem cellbgcolor'">
                        {{ c }}</th>
                    <ng-container *ngFor="let f of LegalFundClasses.LegalFundClassDetailsViewModel; let i=index">
                        <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[3]">COMMERCIAL TERMS</td>
                        <td class="tableItem" *ngIf="c == ColumnNames[4]">
                            <div *ngIf="EditMode[f.Id]">
                                <button type="button" class="btn btn-default btn" style="float: left;"
                                    (click)="reviewClicked(f.Id,1)">Review Terms</button>
                                <!-- <input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" />
                  <input kendoTextBox [(ngModel)]="f.AuditSummary" style="width: 100%; height: 29.5px;" /> -->
                                {{f.AuditSummary}}
                            </div>
                        </td>
                        <td colspan=i class="tableItem" *ngIf="c == ColumnNames[5] && i<1"></td>
                        <td *ngIf="!EditMode[f.Id] && c == ColumnNames[6]" class="tableItem"> {{f.PrimaryCurrencyName}}
                        </td>
                        <td *ngIf="EditMode[f.Id]  && c == ColumnNames[6]" class="tableItem">
                            <kendo-dropdownlist  style="height: 29.5px;" [(ngModel)]="f.CurrencyId"
                                [defaultItem]="defaultItem" class="form-control  form-control-sm"
                                [data]="LegalFundClasses.Currencies" [filterable]="false" textField="Name"
                                [valuePrimitive]="true" valueField="Id">
                            </kendo-dropdownlist>
                        </td>

                        <td *ngIf="!EditMode[f.Id] && c == ColumnNames[7]" class="tableItem"> {{f.ManagerStrategyName}}
                        </td>
                        <td *ngIf="EditMode[f.Id] && c == ColumnNames[7]" class="tableItem">
                            <kendo-dropdownlist style="height: 29.5px;" [(ngModel)]="f.ManagerStrategyId"
                                [defaultItem]="defaultItem" class="form-control  form-control-sm"
                                [data]="LegalFundClasses.ManagerStrategies" [filterable]="false" textField="Name"
                                [valuePrimitive]="true" valueField="Id">
                            </kendo-dropdownlist>
                        </td>
                         <td class="tableItem" *ngIf="c == ColumnNames[56]">
                            <div *ngIf="EditMode[f.Id]">
                                <div *ngIf="hideAdd">
                                    <button type="button" class="btn btn-default btn mr-1" style="float: left;"
                                        (click)="openSideLetterModal(f.Id,f.Description)">Add Side Letter</button>
                                </div>
                                <div *ngIf="hideDelete">
                                    <button type="button" class="btn btn-default btn" style="float: left;"
                                        (click)="deleteSideLetter()">Delete Side Letter</button>
                                </div>
                            </div>
                        </td>
                         </ng-container>
                </ng-container>
            </tr>
        </table>

组件

 public ColumnNames: string[] = ['Legal Class Name',
                            'Last Edited',
                            'Legal Class ID',
                            '',
                            'TERMS',
                            'SUBSCRIPTIONS',
                            'Primary Currency',
                            'Manager Strategy (populate only if different from Fund Manager Strategy)'
                            'Space2'
                          ];

Answer 1

请先创建一个辅助数组键，例如，如果您有

   public keys:string[]=['Description','AuditSummary','Id']
   public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

您可以创建一个类似.html的

<table class="fundClassesTable table-striped" border="1">
    <tr *ngFor="let c of ColumnNames;let i=index">
        <th class="tableItem bold">{{ c }}</th>
        <td *ngFor="let f of data">
            {{f[keys[i]]}}
        </td>
    </tr>
</table>

那么多* ngIF轻柔地杀死了我：）

好吧，我不明白您是否想用数据创建新行。在这种情况下，您只需更改两个数组columnName和Keys。例如

  this.ColumnNames.push('Add Web folio Reds Fee');
  this.keys.push('WebfolioRedsFee')

在此ugly stackblitz

中可以看到

如果要添加列，则只需向数据数组中添加元素。例如

  //add a new empty column
  this.data.splice(index,0,{})
  //or add a new column with a copy of data[10]
  this.data.splice(index,0,{...this.data[10})

Answer 2

问题在于HTML按行制作表格。如果需要新列，则必须创建一个脚本，以手动向每行添加一个<td></td>元素。或者，您可以修复表格，使其从上至下而不是从左至右读取。这样，您只需添加新行并同时保持数据完整性即可。

编辑具体来说，就是像这样更改表格的方向（我省略了可以根据需要添加的所有其他类名。键入太多。）

<table>
   <tr>
     <th>Legal Class Name</th>
     <th>Last Edited</th>
     <th>Legal Class ID</th>
     <th>TERMS</th>
     <th>Primary Currency</th>
     <th>Manager Strategy</th>
   </tr>
   <tr *ngFor="row of rows">
     <td>{{classObject.className}}</td>
     <td>{{classObject.lastEdited}}</td>
     <td>{{classObject.classID}}</td>
     <td>{{classObject.terms}}</td>
     <td>{{classObject.primaryCurrency}}</td>
     <td>{{classObject.managerStrategy}}</td>
   </tr>
</table>

您可以有一个对象，该对象存储有关类的所有详细信息或此表的用途。然后，您只需在单击“ addRow”按钮时向该对象添加一个元素。然后它将自动填充表格。

角在动态生成的表中的现有列旁边创建一个附加列

2 个答案: