簡單使用: 2022/10/1

2022年10月14日星期五

.Net Core HTTP Error 500.19 - Internal Server Error

.Net Core在IIS上的錯誤

HTTP 錯誤 500.19 – 內部伺服器錯誤
HRESULT: 0x8007000d

1.web.config有問題
2.Hosting Bundle有問題(裝完記得開機)

參考資料
開啟 IIS 網頁時出現「HTTP Error 500.19 - Internal Server Error」錯誤

2022年10月5日星期三

Angular 建立Module+Component+Input(22)

建立Module且更新app.module.ts

ng g m news --module=app

到news module資料夾

cd src\app\news

建立component

ng g c news-list --module=news

修改news.module.ts加入exports

@NgModule({
  declarations: [
    NewslistComponent
  ],
  imports: [
    CommonModule
  ],
  exports:[NewslistComponent]
})

建立list底下的component

ng g c news-head --module=news
ng g c news-body --module=news

news-list html部分

 
<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
  <app-news-head [item]="item"></app-news-head>
  <app-news-body [item]="item"></app-news-body>
</div>

news-list ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

Google是總部位於美國加州山景城的跨國科技公司，為Alphabet的子公司，業務範圍涵蓋網際網路廣告、網際網路搜尋、雲端運算等領域，開發並提供大量基於網際網路的產品與服務，其主要利潤來自Ads等廣告服

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

Yahoo奇摩是台灣入口網站之一，由「香港商雅虎資訊股份有限公司台灣分公司」代表營運。該網站於2001年10月雅虎台灣與奇摩站合併後成立，網址續用雅虎台灣的「tw.yahoo.com」

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

微軟是美國的一家跨國電腦科技公司，公司於1975年由比爾·蓋茲與保羅·艾倫創立，以研發、製造、授權及提供廣泛的電腦軟體服務為主。坐標為47.642229°N 122.136934°W

", "href-s": "https://www.microsoft.com/zh-tw", } ];

news-head html部分

 
<div>
  <a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
  <a [href]="item['href-s']">{{ item.title}}-s</a>
</div>

news-head ts部分，@Input()重點

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-news-head',
  templateUrl: './news-head.component.html',
  styleUrls: ['./news-head.component.css']
})
export class NewsHeadComponent implements OnInit {
  @Input()
  item: any;

  constructor() { }

  ngOnInit(): void {
  }
}

news-body html部分

 
<div>
  <div [innerHTML]="item.Content">
  </div>
  <pre>
  {{item.Content|json}}
</pre>
</div>

news-body ts部分，@Input()重點

import { Component, OnInit ,Input} from '@angular/core';

@Component({
  selector: 'app-news-body',
  templateUrl: './news-body.component.html',
  styleUrls: ['./news-body.component.css']
})
export class NewsBodyComponent implements OnInit {
  @Input()
  item: any;

  constructor() { }

  ngOnInit(): void {
  }

}

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年10月4日星期二

Angular ?.安全導覽運算子(Safe Navigation Operator)(21)

目前使用Angualr 14時好像就內含了這功能無須額外寫
html部分

<div id="foridis{{idx}}" *ngFor="let item of data;let idx=index">
  <div>
    <a [href]="item.href" [title]="item.id">{{ item.title}}</a><br />
    <a [href]="item['href-s']">{{ item.sub?.xxx}}</a><br />
    <a [href]="item['href-s']">{{ item.sub?.yyy}}</a><br />
    <div [innerHTML]="item.Content">
    </div>
  </div>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw", "sub": { "xxx": "xxx1", } }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", "sub": { "yyy": "yyy2" } }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", "sub": { "xxx": "xxx3", "yyy": "yyy3" } } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |SlicePipe(20)

html部分

 <div id="foridis{{idx}}" *ngFor="let item of data|slice:1;let idx=index">
  <div>
    <p>
      {{item.Content|slice:0:20}}
    </p>
    <p>
      {{item.Content|slice:-20:-1}}
    </p>
    <p>
      {{item.Content|slice:-20}}
    </p>    
  </div>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |JsonPipe(19)

html部分

<div id="foridis{{idx}}" *ngFor="let item of data|slice:1;let idx=index">
  <pre>
{{item|json}}
</pre>
</div>

ts部分

data = [ { "id": 1, "href": "http://www.golgle.com.tw", "title": "Google", "Content": "

", "href-s": "https://www.google.com.tw" }, { "id": 2, "href": "http://tw.yahoo.com", "title": "雅虎", "Content": "

", "href-s": "https://tw.yahoo.com", }, { "id": 3, "href": "http://www.microsoft.com/zh-tw", "title": "微軟", "Content": "

", "href-s": "https://www.microsoft.com/zh-tw", } ];

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

2022年10月3日星期一

Angular |DecimalPipe(18)

html部分

  <p>
    {{pi | number}}
  </p>
  <p>
    {{pi | number:'4.1-5'}}-4.1-5=整數出現四位、小數點至少一位、小數最多五位
  </p>
  <p>
    minIntegerDigits.minFractionDigits-maxFractionDigits
    <br />
    minIntegerDigits:小數點前的最小整數位數。默認為1<br />
    minFractionDigits: 小數點後的最小位數。默認為0<br />
    maxFractionDigits:小數點後的最大位數。默認值為3<br />
  </p>

ts部分

  pi: number = 3.14159265359;

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |UpperCasePipe、|LowerCasePipe(17)

html部分

<p>{{mStr|uppercase}}-uppercase(轉大寫)</p>
<p>{{mStr|lowercase}}-lowercase(轉小寫)</p>

ts部分

 mStr = "aBcDe";

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網

Angular |DatePipe(16)

更多格式Angular DatePipe
html部分

日期物件
<p>{{mNow|date:'medium' }}</p>
<p>{{mNow|date:'yyyy-MM-dd' }}</p>
字串物件
<p>{{mNows|date:'medium' }}</p>
<p>{{mNows|date:'yyyy-MM-dd' }}</p>
格林威治時間+小時
<p>{{mNow|date:'yyyy-MM-dd HH:mm:ss' :'+0800'}}</p>

ts部分

  mNow = Date.now();
  mNows = '2022-09-11 12:00:12';

參考資料
1.保哥的Angular 開發實戰：從零開始
2.Angular官網
3.Angular DatePipe

訂閱：文章 (Atom)

2022年10月14日 星期五

2022年10月5日 星期三

2022年10月4日 星期二

2022年10月3日 星期一

2022年10月14日星期五

2022年10月5日星期三

2022年10月4日星期二

2022年10月3日星期一