如何將數據從父級傳遞到子級* 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的每個cicle中的“行”值傳遞給“段”組件，並在其中顯示它。

到目前為止，我已經獲得了：

[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 | json}}查看完整的對象或打印row的屬性： {{row.hour}}

Answer 2

將綁定{{row}}替換為{{row.hour}}將按預期顯示小時值