如何在* ngFor Angular结构中将数据从父传递到子组件

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的每个圆圈中的“行”值传递给“segment”组件，并将其显示在其中。

到目前为止，我已经获得了这个：

[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.hour}}替换绑定{{row}}将按预期显示小时值