Question

我需要在angular 7应用程序中实现一个表，该表将按列而不是按行显示记录，如下面的屏幕快照所示。到目前为止，它一直是数据显示在网格中，但这次却有所不同。

例如，在屏幕截图下方的第一行中类ID-值来自FundClassDetailsViewModel数组的Id字段。因此，基本上传递给组件的对象的结构是 FundClassViewModel-> FundDetailsViewModel-> FundClassDetailsViewModel

FundClassDetailsViewModel包含ID，Description等

如何水平显示这些值

我尝试了以下建议，但看不到打印的值。循环有问题吗

有人可以教我一个例子吗

此处的字段如下

Class Id - TextBox
Legal Fund Class - Dropdownlist
Inception Date - Datetime picker
Invested Amount - Text box
Vehicle Type - Dropdownlist
Closure Status - Dropdownlist
Is Side Pocket - Checkbox
Is Thematic - Checkbox
Cogency Class - Dropdownlist

这些列将取决于记录数，因此需要考虑分页。

这是JSON结构的样子

实际的JSON

{"FundDetailsViewModel":[{"CogencyClasses":[{"Id":0,"FundId":0,"ShareClass":"Assign Cogency Fund First","LocalCurrency":null,"Name":"Assign Cogency Fund First "}],"FundClassDetailsViewModel":[{"Id":250033,"Description":"Class B","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11166,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":5508},{"Id":100541,"Description":"Class A","InvestedAmount":null,"InceptionDate":null,"LegalFundClassId":11167,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":5508}],"PrimaryLegalFundClasses":[{"Id":5508,"Description":"Class A","ClassType":1},{"Id":5508,"Description":"Class B","ClassType":1}]},{"CogencyClasses":[{"Id":1121,"FundId":652,"ShareClass":"Class B","LocalCurrency":"USD","Name":"Class B USD"}],"FundClassDetailsViewModel":[{"Id":250028,"Description":"Class A","InvestedAmount":23732600,"InceptionDate":null,"LegalFundClassId":13713,"DataReference":null,"CogencyClassId":1121,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250032,"Description":"Class D","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13714,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250031,"Description":"Class C","InvestedAmount":null,"InceptionDate":"2014-07-31T00:00:00","LegalFundClassId":13715,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250030,"Description":"Class B1","InvestedAmount":null,"InceptionDate":"2014-05-01T00:00:00","LegalFundClassId":13716,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146},{"Id":250029,"Description":"Class B","InvestedAmount":119307314,"InceptionDate":null,"LegalFundClassId":13717,"DataReference":null,"CogencyClassId":null,"ClosureStatusId":null,"IsSidePocket":false,"IsThematic":false,"VehicleTypeId":null,"FundId":237146}],"PrimaryLegalFundClasses":[{"Id":237146,"Description":"Class A","ClassType":3},{"Id":237146,"Description":"Class B","ClassType":3},{"Id":237146,"Description":"Class B1","ClassType":3},{"Id":237146,"Description":"Class C","ClassType":3},{"Id":237146,"Description":"Class D","ClassType":3}]}],"VehicleTypes":[{"Spf":false,"Name":"Secondaries","SortOrder":null,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Co-Investment (non-SPF)","SortOrder":1,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"FX Trade","SortOrder":2,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Listed ETF","SortOrder":3,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Listed Security","SortOrder":4,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Mutual Fund","SortOrder":5,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Offshore Fund","SortOrder":6,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Onshore US - 40 Act Fund","SortOrder":7,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Onshore US Non - 40 Act Fund","SortOrder":8,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"EnTrustPermal Product","SortOrder":9,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Standard","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF – 40 Act","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF – UCITS","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Blocker","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":true,"Name":"EnTrustPermal SPF - Co-Investment","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":true,"Name":"EnTrustPermal SPF - Special Sit","SortOrder":10,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"Private Equity","SortOrder":11,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":false,"Name":"Side-Pocket","SortOrder":12,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":false},{"Spf":false,"Name":"Special Situation (non-SPF)","SortOrder":13,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":true,"IsCardiff":true},{"Spf":false,"Name":"Third Party Fund of Funds","SortOrder":14,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"UCITS","SortOrder":15,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false},{"Spf":false,"Name":"Other","SortOrder":50,"AumReadOnly":false,"PerformanceReadOnly":false,"BloombergTickerRequired":false,"ClassLevel":false,"IsCardiff":false}],"ClosureStatuses":[{"Id":110,"Name":"Hard Closed","IsActive":true,"SortOrder":null},{"Id":111,"Name":"Open","IsActive":true,"SortOrder":null},{"Id":112,"Name":"Soft Closed","IsActive":true,"SortOrder":null},{"Id":1,"Name":"Open - to all","IsActive":true,"SortOrder":1},{"Id":2,"Name":"Open - to Permal only","IsActive":true,"SortOrder":2},{"Id":3,"Name":"Closed - hard","IsActive":true,"SortOrder":3},{"Id":104,"Name":"Closed - with wait list","IsActive":true,"SortOrder":4},{"Id":100,"Name":"Closed - but will reopen","IsActive":true,"SortOrder":5},{"Id":21,"Name":"Closed - but replacing redemptions","IsActive":true,"SortOrder":6},{"Id":101,"Name":"Redemptions Gated","IsActive":true,"SortOrder":7},{"Id":102,"Name":"Redemptions Suspended","IsActive":true,"SortOrder":8},{"Id":103,"Name":"In Liquidation","IsActive":true,"SortOrder":9}]}

FundClassess组件

export class FundClassesComponent implements OnInit {


    @Input() FundClasses;

    constructor() {
    }

    ngOnInit() {
            this.init();
    }

    init() {

    }
}

FundClasses组件

   <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;
    }




    label[for=element-toggle] {
  cursor: pointer;
  color: red;
}
#element-toggle {
  display: none;
}

#element-toggle:checked ~ #toggled-element tr {
  display: block;
  float: left;
}
#element-toggle:checked ~ #toggled-element th,
#element-toggle:checked ~ #toggled-element td {
  display: block;
}
</style>



<label for="element-toggle">Transpose</label>
<input id="element-toggle" type="checkbox" />

<div *ngIf="FundClasses && FundClasses.FundDetailsViewModel">
    <!-- <div *ngIf="fundClassKeys">  -->
    <!-- {{fundClassKeys.length}} -->
    <table class="fundClassesTable" id="toggled-element">

        <tr>
            <td class="tableItem bold">Accounting Class Name</td>
            <td class="tableItem bold">Class ID</td>
            <td class="tableItem bold">Legal Fund Class</td>
            <td class="tableItem bold">Inception Date</td>
            <td class="tableItem bold">Invested Amount</td>
            <td class="tableItem bold">Vehicle Type</td>
            <td class="tableItem bold">Closure Status</td>
            <td class="tableItem bold">Is Side Pocket?</td>
            <td class="tableItem bold">Is Thematic?</td>
            <td class="tableItem bold">Cogency Class?</td>
        </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.Description}}</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

实现的解决方案看起来像这样，因为您有一个div，它被视为单个单元格，在其中，它具有整行。

要解决此问题，请将整个行带到div之外，但在您的情况下，由于需要在循环内进行循环，因此会弄乱ngFor数据。

为简化起见，请将所有必需的数据存储在单个数组中，然后使用单个ngFor进行显示。

示例

/*declaring a variable */
  fundClassDetailsViewModelData = [];

/* storing all the value in that variable */
   this.FundClasses.FundDetailsViewModel.filter(
      data =>
        (this.fundClassDetailsViewModelData = [
          ...this.fundClassDetailsViewModelData,
          ...data.FundClassDetailsViewModel
        ])
    );

然后html将变为

/*remove the outer div and change the ngfor variable*/    
<tr *ngFor="let f of fundClassDetailsViewModelData | 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.Description}}</td>
    <td class="tableItem">{{f.value.IsSidePocket}}</td>
    <td class="tableItem">{{ f.value.IsThematic}}</td>
    <td class="tableItem">{{f.value.CogencyClassId }}</td>
</tr>

对于表的转置，可以使用@ nullptr.t提供的解决方案。

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

我在这里创建了一个工作示例：codesandbox link

Answer 2

您可以使用几个简单的CSS规则对表格进行转置

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

这是一个完整的示例：https://jsfiddle.net/3m2gyLzn/

以角度7

2 个答案: