父组件到子组件值的角度未正确传递答案

【问题标题】：Parent component to child component values is not passing properly in angular父组件到子组件值的角度未正确传递
【发布时间】：2018-10-11 13:31:14
【问题描述】：

我正在尝试使用 Input 装饰器传递 json 值，但它不起作用。我试图将数据父组件传递给子组件，但它无法正常工作。

子组件

<div class="card">
  <div class="card-body">
    <h4 class="card-title">{{ analyticsTitle }}</h4>
      <div *ngFor="let data of datas">
        <a href="{{data.redirectionUrl}}" class="card-link">{{data.description}}</a>
      </div>
      <div class="text-right view-more">
        <a href="{{viewMoreUrl}}">
            {{ viewMore }}
        </a></div>
    </div>
</div>

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


@Component({
  selector: 'app-widget',
  templateUrl: './widget.component.html',
  styleUrls: ['./widget.component.scss']
})
export class WidgetComponent implements OnInit {
  @Input('joke') datas=[];

  ngOnInit() {
  }
}

父组件

<app-widget *ngFor="let j of analytics" [joke]="j"></app-widget>

import { Component, OnInit } from '@angular/core';
import { HomeService } from "./../../service/home.service";

@Component({
  selector: 'app-bi-analytics-platform',
  templateUrl: './bi-analytics-platform.component.html',
  styleUrls: ['./bi-analytics-platform.component.scss']
})
export class BiAnalyticsPlatformComponent implements OnInit {


  analytics = [];
  analyticsTitle = '';
  viewMore = '';
  viewMoreUrl = '';
  constructor(private homeService: HomeService) { 
   }

   ngOnInit() {

    this.homeService.homeDataWidget().subscribe(response => {
      let res = response[0];
      let heading = res['BI-Analytics'][0]['heading'][0];
      this.analytics = res['BI-Analytics'][0]['body'];
      this.analyticsTitle = heading['title'];
      this.viewMore = heading['viewmore'];
      this.viewMoreUrl = heading['viewmoreURL'];
    });

   }

}

JSON 1

[
  {
  "BI-Analytics": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
}]

JSON 2

[
  {
  "Test": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
}]

JSON 3 - 具有嵌套的 json 格式

[
  {
  "Test1": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  },
  {
  "Test2": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]
    {
  "Test3": [{
    "heading": [{
      "viewmore": "View More",
      "viewmoreURL": "http://google.com"
    }],
    "body": [{
        "description": "test",
        "redirectionUrl": "lik"
      }]
  }]

}]

上述格式，需要通过。所以我想传递如下值：

@Input() test1:
@Input() test2

建议是否可行。

【问题讨论】：

什么是“不工作”？
Json 值未填充
您的代码中唯一的错误是您使用的是 href 而不是 Angular 路由器
不，`
` json 值未在 for 循环中分配，因此它不会迭代
数组是否被填充？

【解决方案1】：

看不到任何问题，但以防万一试试这个：

<ng-container *ngFor="let j of analytics">
  <app-widget [joke]="j"></app-widget>
</ng-container>

【讨论】：

没有仍然得到相同的“widget.component.html:4 错误错误：找不到类型为“object”的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如数组. 在 NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)"
好吧，听起来分析不像预期的那样是一个数组，但实际上是别的东西。如果它是一个对象，那么您可以使用键值管道（需要 Angular 6.1）使用 *ngFor 迭代对象属性 - 或者，将其转换为数组
有例子吗
或者只是 Google 将对象转换为数组 javascript - 返回这样的答案 ...stackoverflow.com/questions/38824349/… - 您可能希望使用 lodash 使这样的操作更容易
是否还有 2 个 @Input 装饰器