diff options
| author | 杨宇千 <crupest@outlook.com> | 2019-02-18 12:14:17 +0000 |
|---|---|---|
| committer | 杨宇千 <crupest@outlook.com> | 2019-02-18 12:14:17 +0000 |
| commit | ddf2848df70c40f443773cd1b76d9db13cd1fa23 (patch) | |
| tree | 8e1e2ac2dd6df278f59a97a37e5d374bc2644843 /Timeline/ClientApp/src/app/todo-list-page | |
| parent | 122a28595e45c6ec48a773ca1284238566d497d3 (diff) | |
| parent | 1f0a978ad2b8e5bcd57eef37baca93e00fd6b20b (diff) | |
| download | timeline-ddf2848df70c40f443773cd1b76d9db13cd1fa23.tar.gz timeline-ddf2848df70c40f443773cd1b76d9db13cd1fa23.tar.bz2 timeline-ddf2848df70c40f443773cd1b76d9db13cd1fa23.zip | |
Merged PR 1: Develop todo list page.
Related work items: #1
Diffstat (limited to 'Timeline/ClientApp/src/app/todo-list-page')
3 files changed, 27 insertions, 4 deletions
diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css index e69de29b..c17267c5 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.css @@ -0,0 +1,12 @@ +.item-id { + display: inline-block; + text-align: center; + background: skyblue; + border-radius: 0.2rem; + width: 1.2rem; + height: 1.2rem; +} + +mat-list-item { + margin: 10px; +} diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html index 0d005c83..3a80e4eb 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.html @@ -1,3 +1,9 @@ -<p> - todo-list-page works! -</p> +<mat-progress-bar *ngIf="!items" mode="indeterminate"></mat-progress-bar> + +<mat-list> + <mat-list-item *ngFor="let item of items"> + <mat-card> + <span class="item-id">{{item.id}}</span> {{item.title}} + </mat-card> + </mat-list-item> +</mat-list> diff --git a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts index 37de232b..722ecbdc 100644 --- a/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts +++ b/Timeline/ClientApp/src/app/todo-list-page/todo-list-page.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { TodoListService, WorkItem } from '../todo-list.service'; @Component({ selector: 'app-todo-list-page', @@ -7,7 +8,11 @@ import { Component, OnInit } from '@angular/core'; }) export class TodoListPageComponent implements OnInit { - constructor() { } + items: WorkItem[]; + + constructor(private todoService: TodoListService) { + todoService.getWorkItemList().subscribe(result => this.items = result); + } ngOnInit() { } |