2022年9月29日 星期四

Angular *ngFor(15)

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.title}}-s</a>
    <div [innerHTML]="item.Content">
    </div>
  </div>
</div>
ts部分
 data = [
    {
      "id": 1,
      "href": "http://www.golgle.com.tw",
      "title": "Google",
      "Content": "<p>Google是總部位於美國加州山景城的跨國科技公司,為Alphabet的子公司,業務範圍涵蓋網際網路廣告、網際網路搜尋、雲端運算等領域,開發並提供大量基於網際網路的產品與服務,其主要利潤來自Ads等廣告服</p>",
      "href-s": "https://www.google.com.tw"
    },
    {
      "id": 2,
      "href": "http://tw.yahoo.com",
      "title": "雅虎",
      "Content": "<p>Yahoo奇摩是台灣入口網站之一,由「香港商雅虎資訊股份有限公司台灣分公司」代表營運。該網站於2001年10月雅虎台灣與奇摩站合併後成立,網址續用雅虎台灣的「tw.yahoo.com」</p>",
      "href-s": "https://tw.yahoo.com",
    },
    {
      "id": 3,
      "href": "http://www.microsoft.com/zh-tw",
      "title": "微軟",
      "Content": "<p>微軟是美國的一家跨國電腦科技公司,公司於1975年由比爾·蓋茲與保羅·艾倫創立,以研發、製造、授權及提供廣泛的電腦軟體服務為主。坐標為47.642229°N 122.136934°W</p>",
      "href-s": "https://www.microsoft.com/zh-tw",
    }
  ];
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

Angular [ngSwitch]、*ngSwitchCase、ng-container(14)

html部分
<h5 class="btn-primary btn" (click)="CountPlus()">[ngSwitch]</h5>
<ng-container [ngSwitch]="count % 3">
  <ng-container *ngSwitchCase="0">
    <p>餘數0</p>
  </ng-container>
  <ng-container *ngSwitchCase="1">
    <p>餘數1</p>
  </ng-container>
  <ng-container *ngSwitchCase="2">
    <p>餘數2</p>
  </ng-container>
</ng-container>
ts部分
  count = 1;
  CountPlus() {
    this.count++;
  }
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

2022年9月28日 星期三

Angular *ngIf(13)

html部分
<button class="btn-primary btn" (click)="CountPlus()">點我點我</button>

<p *ngIf="count % 2 == 1">
  {{count}}  以下是另一個Directives,被移掉後再回來就不再是原本的component,可用ngStyle那個component來測試以下
  <br />
  <app-attribute-directives></app-attribute-directives>
</p>

ts部分
 count = 1;

  CountPlus() {
    this.count++;
  }
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

2022年9月27日 星期二

Angular [ngClass](12)

html部分
<h5 (click)="CountPlus()">ngClass</h5>
<p [ngClass]="{'backsp' : count % 2 == 1}">
  {{count}}
</p>
<p [class.backsp]="count % 2 == 1">
  {{count}}
</p>
ts部分
count = 1;

  CountPlus() {
    this.count++;
 }
css部分
.backsp{
    background-color:aqua;
}
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

Angular [ngStyle](11)

html部分
<h5 (click)="CountPlus()">ngStyle</h5>

<p [ngStyle]="{'font-size': (count * 2) + 'px'}">
  {{count}}
</p>
<p [ngStyle]="getStyle()">
  {{count}}
</p>
<p [style.font-size]="(count * 2) + 'px'" [style.color]="'blue'">
  {{count}}
</p>

ts部分
  count = 0;

  CountPlus() {
    this.count++;
  }

  getStyle() {
   return { 'font-size': ( this.count * 2) + 'px' }
  }
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

2022年9月22日 星期四

Angular #範本參考變數(Template Reference Variables)(10)

使用在Template中
html部分
  <input type="text" [(ngModel)]="title" #inputTxt />
  <button (click)="ChangeTitle()">點我</button>
  目前文字:{{inputTxt.value}},目前字數:{{inputTxt.value.length}} 
ts部分
  title = "123";
  ChangeTitle() {
    this.title = "被點了";
  }
使用在directive中
承上面程式碼再另外開新增一個Template
然後加入上面的Template
 <app-template-reference-variables #tfvTemp></app-template-reference-variables>
 <button (click)="tfvTemp.title = '被外面的點了'">被外面的點了</button>;
點被外面的點了也可變動原本Template的屬性
參考資料
1.保哥的Angular 開發實戰:從零開始
2.Angular官網

2022年9月19日 星期一

Angular Virtual Studio 2022 ng generate component

Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
因為vs2022如果是開.net core版本會是app.module.ts及app.service.module.ts兩個,所以兩個module以上所以必須指定module
ng g c firstapp --module=app
參考來源
Could not find an NgModule. Use the skip-import option to skip importing in NgModule.
保哥

Angular Virtual Studio 2022 Install Angular CLI

Angular終於可以在Virtual Studio上直接開發不需再使用VS Code
新增專案時有兩種
1.Angular(前端) + .Net Core(後端API)
2.純前端Angular
這時在vs 2022上輸入
ng version
都是沒用的
1.先安裝node.js如果在安裝VS2022時有勾選就可忽略
2.在專案上右鍵 > 在終端機中開啟 > 選擇開發人員命令提示字元 > 輸入
npm install @angular/cli
進行安裝,再輸入ng version有執行表示安裝完成
特別注意以上操作要在ClinetApp底下資料夾

2022年9月14日 星期三

Visual Studio 2022開啟2019出現404

最近使用vs2022開啟2019後跑專案網頁都會出現404,
後來自己測試修改許多地方
最後修改了port後順利執行