Question

我正在angular应用程序中创建一个html表，该表具有动态填充的行。如下面共享的代码所示，这些列是静态内容。我已经应用了一些样式，但是仍然不能解决问题。有人可以告诉我我要去哪里错吗？

如您在“会计类别名称”列下面的屏幕快照中所见，占据了表格的整个宽度。

HTML

<style>

    th,
    td {
        padding: 7px;
    }

    .fundClassesTable {
        margin: 0 auto;
        font-size: 11px;
    }

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

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

/*
    tr {
  display: block;
  float: left;
}
th, td {
  display: block;
}
    */




</style>


<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">

    <table class="fundClassesTable" >

        <tr>
            <th class="tableItem bold">Accounting Class Name</th>
            <th class="tableItem bold">Class ID</th>
            <th class="tableItem bold">Legal Fund Class</th>
            <th class="tableItem bold">Inception Date</th>
            <th class="tableItem bold">Invested Amount</th>
            <th class="tableItem bold">Vehicle Type</th>
            <th class="tableItem bold">Closure Status</th>
            <th class="tableItem bold">Is Side Pocket?</th>
            <th class="tableItem bold">Is Thematic?</th>
            <th class="tableItem bold">Cogency Class?</th>
        </tr>

        <div *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
            <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                <td class="tableItem">{{ f.value.Description}}</td>
                <td class="tableItem">{{f.value.Id}}</td>
                <td class="tableItem">{{ f.value.LegalFundClassId}}</td>
                <td class="tableItem">{{f.value.InceptionDate}}</td>
                <td class="tableItem">{{ f.value.InvestedAmount}}</td>
                <td class="tableItem">{{f.value.ClosureStatusId}}</td>
                <td class="tableItem">{{ f.value.VehicleTypeId}}</td>
                <td class="tableItem">{{f.value.IsSidePocket}}</td>
                <td class="tableItem">{{ f.value.IsThematic}}</td>
                <td class="tableItem">{{f.value.CogencyClassId}}</td>
            </tr>
        </div>


    </table> 


</div>

屏幕截图

Answer 1

使用ng-container代替div，不会在DOM中添加额外的元素。

        <ng-container *ngFor="let fundClass of FundClasses.FundDetailsViewModel" >
            <tr *ngFor="let f of fundClass['FundClassDetailsViewModel'] | keyvalue">
                ...
            </tr>
        </ng-container>

列和行未正确对齐

1 个答案: