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 | 7d08ce0d0625b8e6a4c6328d9c9d339cc52db4c2 (patch) | |
| tree | 328e729bbbc08bcf8a16fc494cb1c6625e35d2a6 /Timeline/ClientApp/src/app/todo-list-page | |
| parent | 94d9233375f3c8bedcf4dbc62e59f20969af7cb9 (diff) | |
| parent | 1ff6afb0e9fd11ce37ed0206b992514041391761 (diff) | |
| download | timeline-7d08ce0d0625b8e6a4c6328d9c9d339cc52db4c2.tar.gz timeline-7d08ce0d0625b8e6a4c6328d9c9d339cc52db4c2.tar.bz2 timeline-7d08ce0d0625b8e6a4c6328d9c9d339cc52db4c2.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() { } |