Question

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

当我尝试这样做时，它会出来undefined。

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

应用程序用户项组件：

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() {
  }

}

应用程序用户项目模板：

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

应用程序用户列表组件：

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() {
  }

}

应用程序用户列表模板：

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

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

  </li>

</ul>

问题是我得到undefined和fields.name的{{1}}

我能够fields.destination并得到一个对象，但是为什么它不读取该属性？

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[]），它是您要从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。

ngFor如何遍历并找到某些对象，而其他对象未定义？

5 个答案: