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": "

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

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

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

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

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

", "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": "

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", } ];
參考資料
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": "

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", } ];
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網