angle2とnativescriptで* ngForディスプレイ配列の要素を重ねて表示

Question

私はユーザーの入力を配列に取り込み、その配列のデータを同じページに表示したいと考えています。私は* ngForを使用してそれを行うが、それは互いの上に要素を表示します。 HTMLは次のとおりです。

<Gridlayout class="main-container" columns="auto" rows="auto,auto,auto"> 
    <StackLayout exampleTitle toggleNavButton row="0" class="set-hour"> 
     <!-- >> creating-timepicker-html --> 
      <timePicker class="example-container" #timePicker (loaded)="configure(timePicker)" verticalAlignment="center"></timePicker> 
      <Button text="Add hour" (tap)="onTap()"></Button> 

     <!-- << creating-timepicker-html --> 
    </StackLayout> 

    <StackLayout row="1" class="hour" *ngFor="let hour of hours"> 
     <Label [text]='hour.hour'></Label> 
     <Label [text]='hour.minute'></Label> 
    </StackLayout> 
</Gridlayout> 

TSは次のとおりです。

import { Component, OnInit, ViewChild, ElementRef} from "@angular/core"; 
import { UserService} from "../../../services/user.service"; 
import { TimePicker } from "ui/time-picker"; 
import { HoursModel } from "../../../models/hours.model"; 

@Component({ 
    selector: "hours", 
    templateUrl:"components/profile/hours/hours.component.html", 
    styleUrls:["components/profile/hours/hours.component.css"] 
}) 

export class HoursComponent implements OnInit{ 

    @ViewChild("timePicker") tp: ElementRef; 

    public hours:Array<HoursModel>=[]; 
    public index:number=0; 

    constructor(){} 

    ngOnInit(){} 

    configure(timePicker: TimePicker) { 
     timePicker.hour = 21; 
     timePicker.minute = 0; 
    } 

    onTap() { 
     let time =this.tp.nativeElement; 
     this.hours.push(<HoursModel>{id:this.index,hour:time.hour,minute:time.minute}); 
     console.log(JSON.stringify(this.hours)); 
     this.index++; 
    } 

} 

Answer 1

あなたはObservableArrayを使用してみたのですか？ https://docs.nativescript.org/cookbook/data/observable-array

また、あなたがChangeDetectorRef detectCahnges（）メソッド

Answer 2

を試みることができるあなたが、リスト内のデータを表示したいようです。 このコードを使用してみてください：

<ListView [items]="hours | async" > 
<ng-template let-item="hour" > 
<StackLayout> 
<Label [text]='hour.hour'></Label> 
<Label [text]='hour.minute'></Label> 
</StackLayout> 
</ng-template> 
</ListView> 

親コンポーネントがページ自体であるので、あなたが継続的に、互いの上にデータを追加するには、現在のコードで。 リストビューは、検索するUI要素です。