Как получить значение в ngFor listofLog Angular - PullRequest
Новая
       6

Как получить значение в ngFor listofLog Angular

0 голосов
/ 11 сентября 2018

Я новичок в 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 и как я могу сделатьраспечатать это?

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Полагаю, вы пытаетесь это сделать:

Родительский компонент: 

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;
}

У вас есть все объяснения по угловой документации здесь: https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

0 голосов
/ 11 сентября 2018

Вы можете сделать что-то вроде этого.

родитель-component.html 

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

приложение-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

}

приложение-log.html 

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