Как передать данные от отца к сыну Компонент в * ngFor угловой структуре

Question

Я изучаю Angular X и пытаюсь передать некоторые данные от отца к сыну в структуре * ngFor.

Это мой код, который я пробовал до сих пор

@Component({
  selector: 'app-row',
  templateUrl: '<div class="rowTime " *ngFor="let row of rows">
                   <app-segment  [row]="row"> </app-segment>
                </div>',
  styleUrls: ['./row.component.css']
})
export class RowComponent implements OnInit {
  @ViewChild('segments') segments:SegmentComponent;
  rows = [{hour:"00:00"},{hour:"00:30"},{hour:"01:00"},{hour:"01:30"}]

  constructor() { }

  ngOnInit() {
  }
}

------------------------------------------------
@Component({
  selector: 'app-segment',
  templateUrl: '<div class="row border-top border-left border-botton ">
                   <div class="segmentHour">{{row}} </div>
               </div>',
  styleUrls: ['./segment.component.css']
})
export class SegmentComponent implements OnInit {

  @Input() row:string 

  constructor() { }

  ngOnInit() {
  }
}

Моя цель состоит в том, чтобы передать значение "строки" в каждом цикле * ngFor в компонент "сегмента" и показать его в нем.

До сих пор я получал это:

[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb

И я хотел бы получить это:

00:00 aaaaa  bbbbb
00:30 aaaaa  bbbbb
01:00 aaaaa  bbbbb
01:30 aaaaa  bbbbb

Answer 1

То, что вы сделали до сих пор, правильно. Причина, по которой вы получаете [object Object], заключается в том, что row, который вы передали ребенку, является объектом. Вы можете использовать канал json: {{row | json}} для просмотра всего объекта или напечатать свойство row: {{row.hour}}

Answer 2

заменить привязку {{row}} на {{row.hour}} будет отображаться значение часа, как и ожидалось