ngFor如何能够循环并查找某些对象而其他对象未定义？

Question

所以这个问题让我发疯了。 我的朋友有一些代码，当他使用*ngFor和循环时，他能够找到他的对象的属性。 他使用的数组包含一个像我一样的对象。

当我尝试这样做时，它是undefined 。

我试过调试代码，问题是循环找不到属性。

app-user-item组件：

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

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.scss']
})
export class UserItemComponent implements OnInit {


@Input() fields : string[];


  constructor() { 

  }

  ngOnInit() {
  }

}

app-user-item模板：

<h1>fields.name</h1>
<h1>fields.destination</h1>

app-user-list组件：

import { Component, OnInit, } from '@angular/core';
import { stringify } from '@angular/core/src/render3/util';

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {

  fields = [{
    name: "Ian",
    destination: "USA"
  },
  {
    name: "Jesse",
    destination: "Japan"
  }

];



  constructor() {


   }

  ngOnInit() {
  }

}

app-user-list模板：

<ul>
  <li *ngFor= "let field of fields">

    <app-user-item [fields] = "field"> </app-user-item>

  </li>

</ul>

问题是我undefined为fields.name和fields.destination

我能够console.log(fields) ，我得到一个对象，但为什么不读取属性？

Answer 1

将以下编辑内容添加到您的文件中

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

@Component({
  selector: 'app-user-item',
  templateUrl: './user-item.component.html',
  styleUrls: ['./user-item.component.scss']
})
export class UserItemComponent implements OnInit {


// Correctly type your array.
@Input() fields: {name: string, destination:string}[];


  constructor() { 

  }

  ngOnInit() {
  }

}

// I assume this is not inside the same file if so please comment it out

// fields = [{
//    name: "Ian",
//    destination: "USA"
//      },
//      {
//    name: "Jesse",
//    destination: "Japan"
//  }

//];

    <!-- Add Curly Braces -->


<h1>{{fields.name}}</h1>
<h1>{{fields.destination}}</h1>

Answer 2

你错过了字符串插值的双花括号 - 需要像这样 -

{{fields.name}}

下一个属性也是如此

{{fields.destination}}

Answer 3

您可以使用以下代码

 /*func3.component.ts*/ import {Component} from '@angular/core'; @Component({ selector:'box-func3', templateUrl:"./func3.component.html", styleUrls:['./func3.component.scss'] }) export class Fun3Component{ dataObject=[ { "name":"JON SNOW", "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-02.jpg" }, { "name":"SANSA STARK", "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-04.jpg" }, { "name":"ARYA STARK", "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-06.jpg" }, { "name":"BRAN STARK", "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-08.jpg" }, { "name":"THEON GREYJOY", "image":"https://www.elle.vn/wp-content/uploads/2019/04/24/elle-viet-nam-game-of-thrones-10.jpg" } ] } /*func4.component.ts*/ import {Component, Input} from '@angular/core'; @Component({ selector:"box-func4", templateUrl:"./func4.component.html", styleUrls:['./func4.component.scss'] }) export class Func4Component{ @Input() dataName:any=[] constructor(){ } } 

 /*template func3.component.html */ <div class="container"> <box-func4 [dataName]="dataObject"></box-func4> </div> /*template func4.component.html */ <div class="row"> <div class="col-md-4" *ngFor="let item of dataName"> <h2>{{item.name}}</h2> <img [src]="item.image" style="width: 100%"/> </div> </div> 

Answer 4

问题是你错过了花括号（ {{fields.name}}和{{fields.destination}} ），因为每个人都回答。 它会工作，但你的输入不是一个字符串数组（ String[] ），它是一个从ngFor插入app-user-item组件的ngFor 。 把它改成它很好

@Input() field: {name: string, destination:string}; 

和

<ul>
  <li *ngFor= "let field of fields">
    <app-user-item [field] = "field"> </app-user-item>
  </li>
</ul>

Answer 5

我将您的user-item.component.html更改为

<h1>{{fields.name}}</h1>
<h1>{{fields.destination}}</h1>

和user-item.component.ts

@Input() fields;

我做了一个stackblitz供你帮忙。