Skip to content

A
AngularPractice2
Commit be6794cf authored by 李彥志's avatar 李彥志
Browse files
Options

commit

parent 8d11df55
Show whitespace changes
Inline Side-by-side
Showing with 504 additions and 21 deletions
src/app/home/dataList.const.ts 0 → 100644
View file @ be6794cf
export const dataList = [
{
'city': {
'id': 2643743,
'name': 'London',
'coord': {
'lon': -0.1258,
'lat': 51.5085
},
'country': 'GB',
'population': 0
},
'cod': '200',
'message': 0.0597013,
'cnt': 14,
'list_': [
{
'dt': 1546430400,
'temp': {
'day': 4,
'min': -5.23,
'max': 4,
'night': -5.23,
'eve': -0.13,
'morn': -1.36
},
'pressure': 1049.36,
'humidity': 0,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 3.37,
'deg': 2,
'clouds': 0
},
{
'dt': 1546516800,
'temp': {
'day': 7.33,
'min': -7.13,
'max': 7.33,
'night': -7.13,
'eve': -2.57,
'morn': 1.34
},
'pressure': 1048.26,
'humidity': 73,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 1.92,
'deg': 350,
'clouds': 0
},
{
'dt': 1546603200,
'temp': {
'day': 1.56,
'min': -7.9,
'max': 2.3,
'night': -3.84,
'eve': -1.88,
'morn': -7.9
},
'pressure': 1046.87,
'humidity': 78,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 2.3,
'deg': 277,
'clouds': 0
},
{
'dt': 1546689600,
'temp': {
'day': 2.85,
'min': -3.8,
'max': 3.54,
'night': -1,
'eve': 2.45,
'morn': -3.8
},
'pressure': 1043.75,
'humidity': 92,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 3.21,
'deg': 303,
'clouds': 88,
'rain': 0.34
},
{
'dt': 1546776000,
'temp': {
'day': 4.45,
'min': 0.69,
'max': 4.45,
'night': 1.04,
'eve': 2.55,
'morn': 0.69
},
'pressure': 1040.37,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 3.75,
'deg': 297,
'clouds': 92
},
{
'dt': 1546862400,
'temp': {
'day': 4.61,
'min': -3.07,
'max': 4.61,
'night': -3.07,
'eve': 0.6,
'morn': 1.42
},
'pressure': 1039.55,
'humidity': 0,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 1.98,
'deg': 314,
'clouds': 56
},
{
'dt': 1546948800,
'temp': {
'day': 4.95,
'min': 1.45,
'max': 5.88,
'night': 5.71,
'eve': 5.88,
'morn': 1.45
},
'pressure': 1038.93,
'humidity': 0,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 3.14,
'deg': 213,
'clouds': 71
},
{
'dt': 1547035200,
'temp': {
'day': 11.64,
'min': 8.74,
'max': 11.64,
'night': 10.89,
'eve': 11.33,
'morn': 8.74
},
'pressure': 1030.48,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 6.9,
'deg': 261,
'clouds': 53,
'rain': 0.34
},
{
'dt': 1547121600,
'temp': {
'day': 12.54,
'min': 8.77,
'max': 12.54,
'night': 8.77,
'eve': 10.37,
'morn': 11.46
},
'pressure': 1026.72,
'humidity': 0,
'weather': [
{
'id': 800,
'main': 'Clear',
'description': 'sky is clear',
'icon': '01d'
}
],
'speed': 6.71,
'deg': 292,
'clouds': 72
},
{
'dt': 1547208000,
'temp': {
'day': 11.32,
'min': 9.37,
'max': 11.32,
'night': 9.83,
'eve': 10.92,
'morn': 9.37
},
'pressure': 1023.9,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 6.22,
'deg': 243,
'clouds': 75,
'rain': 0.25
},
{
'dt': 1547294400,
'temp': {
'day': 10.72,
'min': 9.82,
'max': 10.72,
'night': 10.45,
'eve': 10.06,
'morn': 9.82
},
'pressure': 1013.87,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 7.32,
'deg': 203,
'clouds': 100,
'rain': 1.6
},
{
'dt': 1547380800,
'temp': {
'day': 9.19,
'min': 5.48,
'max': 9.28,
'night': 5.48,
'eve': 6.64,
'morn': 9.28
},
'pressure': 999.12,
'humidity': 0,
'weather': [
{
'id': 501,
'main': 'Rain',
'description': 'moderate rain',
'icon': '10d'
}
],
'speed': 5.19,
'deg': 220,
'clouds': 94,
'rain': 8.85
},
{
'dt': 1547467200,
'temp': {
'day': 8.05,
'min': 3.22,
'max': 8.05,
'night': 3.22,
'eve': 5.32,
'morn': 7.02
},
'pressure': 986.3,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 8.15,
'deg': 186,
'clouds': 92,
'rain': 0.8
},
{
'dt': 1547553600,
'temp': {
'day': 7.66,
'min': 2.62,
'max': 7.66,
'night': 4.34,
'eve': 3.78,
'morn': 2.62
},
'pressure': 989.42,
'humidity': 0,
'weather': [
{
'id': 500,
'main': 'Rain',
'description': 'light rain',
'icon': '10d'
}
],
'speed': 3.5,
'deg': 199,
'clouds': 34,
'rain': 2.8
}
]
}
];
src/app/home/home.component.html
View file @ be6794cf
......@@ -2,6 +2,7 @@
cnt:<input type="number" min="1" max="7"><br>
城市資訊;<br>
<table border="1">
<thead>
<tr>
<th rowspan="2">id</th>
<th rowspan="2">name</th>
......@@ -13,6 +14,17 @@ cnt:<input type="number" min="1" max="7"><br>
<th>lon</th>
<th>lat</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of list">
<td>{{item.city.id}}</td>
<td>{{item.city.name}}</td>
<td>{{item.city.coord.lon}}</td>
<td>{{item.city.coord.lat}}</td>
<td>{{item.city.country}}</td>
<td>{{item.city.population}}</td>
</tr>
</tbody>
</table>
天氣資訊;<br>
<table border="1">
......@@ -39,5 +51,59 @@ cnt:<input type="number" min="1" max="7"><br>
<th>description</th>
<th>icon</th>
</tr>
<tr *ngFor="let item of list">
<td>
{{item.list_.dt}}
</td>
<td>
{{item.list_.temp.day}} °C
</td>
<td>
{{item.list_.temp.min}} °C
</td>
<td>
{{item.list_.temp.max }} °C
</td>
<td>
{{item.list_.temp.night }} °C
</td>
<td>
{{item.list_.temp.eve }} °C
</td>
<td>
{{item.list_.temp.morn }} °C
</td>
<td>
{{item.list_.pressure}} hpa
</td>
<td>
{{item.list_.humidity}} %
</td>
<td>
{{item.list_.weather.id }}
</td>
<td>
{{item.list_.weather.main }}
</td>
<td >
{{item.list_.weather.description }}
</td>
<td>
{{item.list_.weather.icon }}
</td>
<td>
{{item.list_.speed}} meter/sec
</td>
<td>
{{item.list_.deg}} °
</td>
<td>
{{item.list_.clouds}} %
</td>
<td>
{{item.list_.rain}}
</td>
</tr>
</table>
<br>
src/app/home/home.component.ts
View file @ be6794cf
import { Component, OnInit } from '@angular/core';
import { dataList } from './dataList.const';
@Component({
selector: 'app-home',
......@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
list = dataList;
constructor() { }
ngOnInit() {
......
src/app/p2/message.ts → src/app/p2/data.ts
View file @ be6794cf
export class Message {
export class Data {
name: string;
price: string;
quantity: string;
price: any;
quantity: any;
constructor(name: string, price: string, quantity: string) {
constructor(name: string, price: any, quantity: any) {
this.name = name;
this.price = price;
this.quantity = quantity;
}
}
src/app/p2/p2.component.html
View file @ be6794cf
<p style="color:green">題二</p>
<form (ngSubmit)="addMessage()">
<form (ngSubmit)="addData()">
<p>
單品：<input type="text" name="name" [(ngModel)]="name"><br>
單品：<input type="text" name="name" [(ngModel)]="name" ><br>
單價：<input type="number" name="price" min="1" [(ngModel)]="price"><br>
數量：<input type="number" name="quantity" min="1" [(ngModel)]="quantity"><br>
你購買 {{ name }} 商品，單價 {{ price }} 元，數量{{ quantity }}元，共計NT${{ price * quantity}} 元
......@@ -19,18 +19,18 @@
<th>小計</th>
</tr>
<!-- 清單 -->
<ng-container *ngFor="let message of messages; let i = index">
<ng-container *ngFor="let data of datas; let i = index">
<tr>
<td><button (click)="deleteItem(item)">刪除</button></td>
<td>{{ message.name }}</td>
<td>{{ message.price }}</td>
<td>{{ message.quantity }}</td>
<td>{{ message.price * message.quantity}}</td>
<td><button (click)="deleteItem(data)">刪除</button></td>
<td>{{ data.name }}</td>
<td>{{ data.price }}</td>
<td>{{ data.quantity }}</td>
<td>{{ data.price * data.quantity}}</td>
</tr>
</ng-container>
<tr>
<td colspan="4" align="right">加總</td>
<td>{{total}}</td>
<td>{{ totalPrice() }}</td>
</tr>
</table>
<br>
......
src/app/p2/p2.component.ts
View file @ be6794cf
import { Component, OnInit } from '@angular/core';
import { Message } from './message';
import { Data } from './data';
@Component({
selector: 'app-p2',
......@@ -14,26 +14,48 @@ export class P2Component implements OnInit {
quantity = '';
messages: Message[] = [];
datas: Data[] = [];
result = 0;
total = '';
addMessage(): void {
message = '';
buildMessage(): void {
if (this.name !== null && this.price !== null && this.quantity !== null &&
this.name !== undefined && this.price !== undefined && this.quantity !== undefined
) {
this.message = "你購買" + this.name + "商品，單價" + this.price + "元，數量"
+ this.quantity + "元，共計NT$";
}
}
addData(): void {
// 防呆，避免名稱或內容是空值時也可以留言
if (
!this.name.trim() && !this.price.trim() && !this.quantity.trim()
) {
return;
return alert('項目資訊沒填好');
}
// 用名稱跟內容產生一個留言的資料物件
const message = new Message(this.name, this.price, this.quantity);
const data = new Data(this.name, this.price, this.quantity);
// 將留言的資料物件放進容器裡
this.messages.push(message);
this.datas.push(data);
}
deleteItem(): void {
alert('清空啦');
totalPrice(){
return '算不出來';
}
deleteItem(name): void {
console.log(name);
// if(this.datas[i]['name'] == name)
// this.datas.splice(this.datas, 1);
}
constructor() { }
......
src/app/p3/p3.component.html
View file @ be6794cf
<p style="color:green">題三</p>
寬度 : <input type="number" min="1"><br>
高度 : <input type="number" min="1"><br>
寬度 : <input type="number" min="1" ><br>
高度 : <input type="number" min="1" ><br>
<img [src]="imageUrl">
<router-outlet></router-outlet>
src/app/p3/p3.component.ts
View file @ be6794cf
......@@ -7,9 +7,21 @@ import { Component, OnInit } from '@angular/core';
})
export class P3Component implements OnInit {
constructor() { }
widthLength = '1024';
heightLength = '768';
imageUrl = 'http://lorempixel.com//{{widthLength}}/{{heightLength}}/';
ngOnInit() {
showPic() {
if (this.widthLength !== null && this.heightLength !== null &&
this.widthLength !== undefined && this.heightLength !== undefined) {
this.imageUrl = "http://lorempixel.com/" + this.widthLength + "/" + this.heightLength + "/";
} else {
alert("長度或高度不得為空!");
}
}
constructor() { }
ngOnInit() { }
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment