Question

我是角色的新手，我将JSON解析为DOM元素。

JSON响应的一部分：

Set DrsInv = db.OpenRecordset("SELECT Invoice.InvoiceDate, InvoicedProduct.InvoiceType, Invoice.InvoiceStatus, Invoice.RetailerID, Invoice.DailySalesID, Invoice.RepID, InvoicedProduct.Quantity, InvoicedProduct.UnitRate, InvoicedProduct.TotalItemValue From Invoice INNER JOIN InvoicedProduct ON (Invoice.DailySalesID = InvoicedProduct.DailySalesID) AND (Invoice.RepID = InvoicedProduct.RepID) AND (Invoice.InvoiceID = InvoicedProduct.InvoiceID)" _
                            & " WHERE ((DateValue(Replace(Invoice.InvoiceDate, ': ', ' ')) Between #" & Format(dtpFrom.value, "yyyy/mm/dd") & "# And #" & Format(dtpTo.value, "yyyy/mm/dd") & "#) AND (InvoicedProduct.ProductID = '" & Srs("ProductID") & "'))" _
                            & " GROUP BY Invoice.InvoiceDate, InvoicedProduct.InvoiceType, Invoice.InvoiceStatus, Invoice.RetailerID, Invoice.DailySalesID, Invoice.RepID, InvoicedProduct.Quantity, InvoicedProduct.UnitRate, InvoicedProduct.TotalItemValue HAVING ((InvoicedProduct.InvoiceType)='Invoice' AND (Invoice.InvoiceStatus)='VALID') Order By Invoice.InvoiceDate DESC")

我正在使用此HTML代码循环使用JSON;

"fabricAnswers": [
        {
            "id": 11,
            "answer": "daily active users",
            "answerValue": 7,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 12,
            "answer": "daily new users",
            "answerValue": 1,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 13,
            "answer": "monthly active users",
            "answerValue": 272,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 14,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 15,
            "answer": "sessions",
            "answerValue": 9,
            "platform": "android",
            "syncTime": 1525096804000,
            "appId": 5
        },
        {
            "id": 16,
            "answer": "daily active users",
            "answerValue": 10,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 17,
            "answer": "daily new users",
            "answerValue": 4,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 18,
            "answer": "monthly active users",
            "answerValue": 480,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 19,
            "answer": "crash-free users",
            "answerValue": 100,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        },
        {
            "id": 20,
            "answer": "sessions",
            "answerValue": 11,
            "platform": "ios",
            "syncTime": 1525096805000,
            "appId": 5
        }
    ]

1个图块的屏幕输出：

如您所见，iOS细节呈现如下。这是因为<div class="row "> <div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics"> <div class="block"> <div class='block-body'> {{ statistic.appName }} </div> <table> <tr> <th>Syncdate</th> <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th> <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th> </tr> <tr *ngFor="let info of statistic.fabricAnswers"> <td *ngIf="info.platform == 'android'"> {{info.answer}}</td> <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td> <td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td> </tr> </table> </div> </div>在解析＆＃39; Android＆＃39;时是空的。元素。如何用iOS详细信息填充空列？

编辑：我实施了Parkar所说的：

Component.HTML：

<td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>

component.ts：

<div class="row ">
<div class="col-xs-12 col-sm-3" *ngFor="let statistic of statistic.statistics">
  <div class="block">
    <div class='block-body'> {{ statistic.appName }} </div>
    <table>
      <tr>
        <th>Syncdate</th>
        <th><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Android_robot.svg/2000px-Android_robot.svg.png" alt="" border=3 height=30 width=25></th>
        <th><img src="https://cayland.com/images/ios-logo.png" alt="" border=3 height=30 width=60></th>
      </tr>
      <tr *ngFor="let info of statistic.fabricAnswers">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <!--<td *ngIf="info.platform == 'ios'">{{info.answerValue}}</td>-->
        <td>{{getIphoneValue(statistic.fabricAnswers, info)}}</td>
      </tr>
    </table>
  </div>
</div>

屏幕上的输出：

我收到的错误消息：

export class StatisticsComponent implements OnInit {

constructor(private statistic: HttpclientService) { }

 ngOnInit() {}

 getIphoneValue(list: any[], info: any) {
    return list.find(i =>
    i.answer === info.answer && i.platform === 'ios'
  ).answerValue;
}
}

Answer 1

只显示android平台答案并通过ios抓取function平台问题answerValue，或者您可以编写Pure Pipe（更高效）。

<ng-container *ngFor="let info of fabricAnswers">
    <tr *ngIf="info.platform == 'android'">
        <td *ngIf="info.platform == 'android'"> {{info.answer}}</td>
        <td *ngIf="info.platform == 'android'"> {{info.answerValue}}</td>
        <td>{{getIphoneValue(fabricAnswers, info)}}</td>
    </tr>
</ng-container>

<强>代码

getIphoneValue(list: any[],info: any) {
   var iosItem = list
     .find(i => 
        i.answer == info.answer && i.platform === 'ios'
     );
    return iosItem ? iosItem.answerValue: '';
}

Stackblitz Demo

Answer 2

我使用管道解决了问题：

        $this->get("security.token_storage")->setToken(null);
        $this->get("session")->invalidate(true);

        $targetUrl = $this->generateUrl("logout");

角度填充空表列

2 个答案: