Angular 如何获取ngFor listofLog中的值

我是角度方面的新手，所以我需要用ngFor将值从一个组件传递到另一个组件。假设有两个组件：日志和日志。 我的

logs.component.html

是：

//iterane on a list that I have created 
    <app-log *ngFor="let log of listLog;let i= index"></app-log>

//我创建的列表中的iTrane

在my log.component.html中：

//Something like this
<p>The server timestamp {{ log[i] }}</p>

//类似这样的东西
服务器时间戳{{log[i]}

---

如何在log.component.html中传递日志值以及如何打印它？

您可以这样做

父组件.html

<ng-container *ngFor="let log of listLog">
  <app-log [log]="log"></app-log>
</ng-container>

<div>
  {{log}}
</div>

应用程序日志.html

<ng-container *ngFor="let log of listLog">
  <app-log [log]="log"></app-log>
</ng-container>

<div>
  {{log}}
</div>

{{log}}

您可以这样做

父组件.html

<ng-container *ngFor="let log of listLog">
  <app-log [log]="log"></app-log>
</ng-container>

<div>
  {{log}}
</div>

应用程序日志.html

<ng-container *ngFor="let log of listLog">
  <app-log [log]="log"></app-log>
</ng-container>

<div>
  {{log}}
</div>

{{log}}

我想你是想这么做的：

父组件：

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

import { HEROES } from './hero';

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

从'@angular/core'导入{Component}；
从“/hero”导入{heromes}；
@组成部分({
选择器：“应用程序英雄父级”，
模板：`
{{master}}控制{{heromes.length}}个英雄
我想你是想这么做的：

父组件：

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

import { HEROES } from './hero';

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

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

import { Hero } from './hero';

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

从'@angular/core'导入{Component}；
从“/hero”导入{heromes}；
@组成部分({
选择器：“应用程序英雄父级”，
模板：`
{{master}}控制{{heromes.length}}个英雄
迭代时，log已经表示数组listLog的一个元素。因此，在ngFor中，如果是字符串或
{{log}}，可以使用
{{log}
如果它是一个对象，请查看发生了什么。如果不查看日志元素的结构，我不理解您试图做什么。是否要实例化“应用程序日志”列表日志中每个日志的组件？然后您可以将其添加到应用程序日志的属性中，并将应用程序日志包装到
，并在ng容器中使用*ngFor。（编辑：有关此建议的详细信息，请参阅Anuradha Gunasekara发布的答案）迭代时，log已经表示数组listLog的一个元素。因此，在ngFor中，如果是字符串或
{{log}}，则可以使用
{{log}}
如果它是一个对象，请查看发生了什么。如果不查看日志元素的结构，我不理解您试图做什么。是否要实例化“应用程序日志”列表日志中每个日志的组件？然后您可以将其添加到应用程序日志的属性中，并将应用程序日志包装到
，并在ng容器中使用*ngFor。（编辑：有关此建议的详细信息，请参阅Anuradha Gunasekara发布的答案）这是正确的。在本例中，您不需要提及“let i=index”。这是正确的。在本例中，您不需要提及“let i=index”。