Question

我不断得到对象内部属性的未定义。 ngFor能够识别数组内部的其余字符串，但不能识别对象内部的属性。如何获得ngFor来识别该财产？

我不想更改包含对象的数组，因为我之前已经在寻找的结果中看到了这一点。由于某种原因，我的代码无法显示对象的属性。

父组件用户列表

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

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


  constructor() {
    this.names = [{title:'Ari'},{title:'Carlos'},{title:'Felipe'},{title:'Nate'}];
   }

  ngOnInit() {
  }

}

子组件用户项

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() name: any;

  constructor() {



   }

  ngOnInit() {
  }

}

父组件用户列表html

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

子组件用户项html

<h1>
Hello {{name.title}}
</h1>

当我尝试输入代号name.title时，我得到的是不确定的。我应该得到Ari和Carlos的列表，而不是未定义的列表，因为它们都是对象内部键标题的值。

如何在子组件html中使用name.title来显示Ari和Carlos？

Answer 1

使用{{name?.title}}和this.names对象数组的正确语法

this.names = [
    {title:'Ari'},
    {title:'Carlos'},
    {title:'Felipe'},
    {title:'Nate'}
];

Answer 2

在您的孩子的html中。

<h1>
Hello {{name?.title ? name.title: names}}
</h1>
<!-- we need to use ternary operator bcs in your array is contain a object as well as direct value -->

为什么我的ngFor循环无法识别对象内部的属性？

2 个答案: