angular - 以 Angular 7 按列显示数据

标签 angular

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

例如截图下方第一行 Class Id - 这些值来自 FundClassDetailsViewModel 数组的 Id 字段。所以基本上传递给组件的对象的结构是 FundClassViewModel -> FundDetailsViewModel -> FundClassDetailsViewModel

FundClassDetailsViewModel 包含 Id 、 Description 等

我将如何水平显示这些值

我按照下面的建议进行了尝试，但看不到打印的值。循环有问题吗

enter image description here

谁能给我举个例子

这里字段如下

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 的结构是这样的

enter image description here

实际的 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>

尝试实现解决方案建议后的屏幕截图

enter image description here

最佳答案

您的实现解决方案看起来像这样，因为您有一个 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

关于angular - 以 Angular 7 按列显示数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55870279/

上一篇：Angular 4 下载 base64 图像数组作为 ZIP 文件

下一篇：angular - 如何禁用 Angular 7 中的按钮

相关文章：

加载第一个子路由后，Angular2 路由不起作用

angular - 无法绑定(bind)到 inlineSVG

Angular Service Worker - Rest API 数据

key - angular2 elvis 运算符和括号表示法/按键访问对象

javascript - 字段变化触发功能

Angular2 等待 HttpPost 响应

Angular 7 - Service Worker PWA + SSR 无法在服务器上运行

css - 在 Angular 7 组件之间共享数据

javascript - 按子子嵌套数组的第一个值对 Angular 管道中的对象集合进行排序

javascript - 如何在 Angular 中停止计时器？

©2024 IT工具网  联系我们