如何获取 ngFor listofLog 中的值 Angular

Question

我是 Angular 的新手，所以我需要使用 ngFor 将值从组件传递到另一个组件。假设有两个组件：日志和日志。我的 logs.component.html 是：

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

在我的 log.component.html:

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

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

Answer 1

你可以这样做。

parent-component.html

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

app-log.ts

@Component({
  selector: 'app-log',
  styleUrls: ['./app-log.component.scss'],
  templateUrl: './app-log.component.html'
})

export class LogComponent {

  @Input()
  public log: any; // change any to the data type of log

}

app-log.html

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

Answer 2

我猜你会尝试这样做:

父组件：

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 文档的所有解释： https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

如何获取 ngFor listofLog 中的值 Angular

How to get the value in a ngFor listofLog Angular

ngfor

angular