第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

*ngFor 循環(huán)無(wú)法在 Angular 9 中顯示 json 數(shù)據(jù)

*ngFor 循環(huán)無(wú)法在 Angular 9 中顯示 json 數(shù)據(jù)

翻閱古今 2023-07-14 16:49:22
我正在 Angular 9 應(yīng)用程序中讀取本地 json 文件，并嘗試將結(jié)果顯示到 app.component.html。我在這里花了相當(dāng)多的時(shí)間研究和嘗試不同的技術(shù)，例如 *ngFor 循環(huán)訪問(wèn) httpClient.get 調(diào)用返回的數(shù)據(jù)（存儲(chǔ)在變量中），以及使用技術(shù)將數(shù)據(jù)集 this.initialData轉(zhuǎn)換為數(shù)組對(duì)象數(shù)組，存儲(chǔ)在this.dataValues變量中。我在每次循環(huán)嘗試后發(fā)布了屏幕截圖，替換了變量。我將不勝感激任何關(guān)于如何實(shí)現(xiàn)這一點(diǎn)的反饋，到目前為止，數(shù)據(jù)不會(huì)呈現(xiàn)到頁(yè)面，而是向我將發(fā)布的控制臺(tái)拋出錯(cuò)誤。我可以 =use console.log() 來(lái)查看變量是用 JSON 數(shù)據(jù)填充的。這是 json 文件：{  "data": [    {      "id": 18,      "internal_name": "scone_birthday",      "type": "coupon",      "description": "Free Scone awarded for a members birthday",      "heading": "Toast to your birthday!",      "subheading": "Our gift to you",      "body": "This is the body for the <span style='font-family: \"Times New Roman\", Times, serif;'><strong><em><span style=\"color: rgb(0, 198, 255);\">birthday offer.</span></em></strong></span><span style=\"font-family: Georgia,serif;\"></span>",      "subject": "",      "details": "This is the details for the birthday <strong>offer</strong>.",      "action": "",      "image1_bg": "",      "image_url": "images/birthday_candle.png",      "respondable": true,      "metric_amount": "150.0",      "metric_name": "spend",      "usage_end_date": "2020-11-05T23:59:59.000+11:00"    },    {      "id": 4,      "internal_name": "voucher",      "type": "coupon",      "description": null,      "rank": "1.0",      "start_date": null,      "end_date": null,      "heading": "HighFIVE!",      "subheading": "You&#39;ve got $5 of dough*",     }  ]}
查看完整描述

2 回答

?
白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

{

  "data": [

    {

      "id": 18,

      "internal_name": "scone_birthday",

      "type": "coupon",

      "description": "Free Scone awarded for a members birthday",

      "heading": "Toast to your birthday!",

      "subheading": "Our gift to you",

      "body": "This is the body for the <span style='font-family: \"Times New Roman\", Times, serif;'><strong><em><span style=\"color: rgb(0, 198, 255);\">birthday offer.</span></em></strong></span><span style=\"font-family: Georgia,serif;\"></span>",

      "subject": "",

      "details": "This is the details for the birthday <strong>offer</strong>.",

      "action": "",

      "image1_bg": "",

      "image_url": "images/birthday_candle.png",

      "respondable": true,

      "metric_amount": "150.0",

      "metric_name": "spend",

      "usage_end_date": "2020-11-05T23:59:59.000+11:00"

    },

    {

      "id": 4,

      "internal_name": "voucher",

      "type": "coupon",

      "description": null,

      "rank": "1.0",

      "start_date": null,

      "end_date": null,

      "heading": "HighFIVE!",

      "subheading": "You&#39;ve got $5 of dough*",

      "body": "Redeem for a $5 reward. <a href=\"https://en.wikipedia.org/wiki/Lorem_ipsum\" rel=\"noopener noreferrer\" target=\"_blank\">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",

      "subject": "Subject",

      "details": "",

      "action": "",

      "image1_bg": "",

      "image_url": "images/five_dollar.png",

      "respondable": true,

      "metric_amount": "200.0",

      "metric_name": "point",

      "usage_end_date": "2020-11-08T23:59:59.000+11:00"

    },

    {

      "id": 19,

      "internal_name": "loaf_welcome",

      "type": "coupon",

      "description": "Onboarding offer for member - free loaf ",

      "start_date": null,

      "end_date": null,

      "heading": "Get a slice of delight",

      "subheading": "Treat Yourself",

      "body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",

      "subject": "",

      "details": "",

      "action": "",

      "image1_bg": "",

      "image_url": "images/gift.png",

      "respondable": true,

      "metric_amount": "100.0",

      "metric_name": "spend",

      "usage_end_date": "2020-12-30T23:59:59.000+11:00"

    }

  ]

}


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
慕慕森

TA貢獻(xiàn)1856條經(jīng)驗(yàn) 獲得超17個(gè)贊

不完全確定您要做什么，但似乎數(shù)組實(shí)際上位于嵌套屬性內(nèi)data。您可以Array#map僅提取特定屬性并async在模板中使用管道來(lái)避免訂閱。


嘗試以下操作


控制器


import { Component, OnInit } from "@angular/core";


import { Observable } from "rxjs";

import { map } from "rxjs/operators";


@Component({ ... })

export class HomeComponent implements OnInit {

  dataValues$: Observable<any>;


  constructor(private dataService: DataService) {}


  ngOnInit() {

    this.dataValues$ = this.http.get('assets/rewards.json')

      .getRewards()

      .pipe(

        map((data: any) => (data.data as Array<any>).map((d: any) => d.body))

      );

  }

}

模板


<ng-container *ngIf="(dataValues$ | async) as dataValues">

    <table class="table table-striped">

        <thead>

            <tr>

                <td>Data Values 1</td>

                <td>Data Values 2</td>

                <td>Data Values 3</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td *ngFor="let column of dataValues">

                    <span [innerHTML]="column | safeHtml"></span>

                </td>

            </tr>

        </tbody>

    </table>

</ng-container>

安全管


import { Pipe, PipeTransform } from "@angular/core";

import { DomSanitizer } from "@angular/platform-browser";


@Pipe({ name: "safeHtml", pure: true })

export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) {}


  transform(value: string): any {

    return this.sanitizer.bypassSecurityTrustHtml(value);

  }

}

工作示例：Stackblitz

更新：迭代控制器中的數(shù)組

要在控制器中使用響應(yīng)，您可以跳過(guò)async管道并在控制器中訂閱。


嘗試以下操作


export class HomeComponent implements OnInit {

  constructor(private dataService: DataService) {}


  ngOnInit() {

    this.dataService.getRewards().subscribe({

      next: (data: any) => {

        data.data.forEach((item: any) => {

          console.log(item);

          console.log("id:", item.id);

          console.log("internal_name:", item.internal_name);

          // do something else

        });

      }

    });

  }

}

工作示例：Stackblitz


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 2 回答
  • 0 關(guān)注
  • 166 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)