這個資料夾通常是放 modules 常用到的 class 用來定義 interface
type
extend class
,為了方便使用所以特別拉出來
const rawPayload = { ... }
const payload = new Class(rawPayload)
this.apiPostService.subscribe((res) => {
console.log(res)
})
export class ProductsBasic {
public openLoadingImg: boolean = false
constructor(){}
...
}
import { Category, Products, ProductsBasic } from 'src/app/modules/emarket/models/products-basic';
export class ProductsPageComponent extends ProductsBasic implements OnInit {
...
}
命名的時候可在前面寫一個 prefix I
來定義這個是 interface
interface ISuggestedGroup {
path: string;
title_en: string;
title: string;
count: number;
children: ISuggestedGroup[];
}
export interface IBasicResponse<T> {
ReturnCode: number;
data: T;
status: string;
}
interface IMenuData {
manufacturers: IManufacturer[];
applications: IManufacturer[];
functions: IManufacturer[];
components: IManufacturer[];
}
const { data } = await useFetch<IBasicResponse<IMenu>>("/api/config/getMenu");
type SizeType = "sm" | "base" | "md" | "md-bold" | "lg";
export enum PaymentMethod {
Stripe = "Stripe",
Paypal = "Paypal",
WireTransfer = "WireTransfer",
CashCoupon = "Cash Coupon",
}
switch (method) {
case PaymentMethod.Stripe:
...
break;
case PaymentMethod.Paypal:
...
break;
default:
...
}
與後端 API 溝通使用,可以是 request payload 或 response
可用於檢查資料,當資料欄位修改時,可以依賴 IDE 做檢查,ng 編譯也會檢查
可用於選單的製作
可用於定義某資料欄位的限定值
https://medium.com/@notwist123/typescript-列舉型別-enumerate-96fc2eedd581
響應式表單提供了一種模型驅動的方式來處理表單輸入,其中的值會隨時間而變化。本文會向你展示如何建立和更新基本的表單控制元件,接下來還會在一個表單組中使用多個控制元件,驗證表單的值,以及建立動態表單,也就是在執行期新增或移除控制元件。 form 表單 這裡的 require 建儀是寫在 formGroup 裡面去作理管,才可方便的在 js 中看到何為必填值。 <form [formGroup]="subscribeForm" (ngSubmit)="submit()"> <mat-form-field class="w-full"> <input matInput required type="email" formControlName="email" /> <mat-error> Please enter a valid email address </mat-error> </mat-form-field>
Jul 15, 2024angular 原生的 number 需要特別去看一下 decimaPipe
Jul 15, 2024asdf
Dec 1, 2022開發 Angular 就不能不知道 Angular CLI 這個超級好用的命令列工具,有了這個工具,原本渾沌的開發環境,頓時清晰,許多繁瑣的瑣事,一個命令就搞定!這邊是我自己的操作筆記,讓記憶力不佳的我,有個地方可以方便查詢。 這裡的內容不保證最新,但會盡量持續更新。 最即時的文件請參考 Angular CLI 在 Github 上的文件,例如要查 ng new 這個指令的用法,請參考這個連結。 安裝 建議使用 Node.js 的 npm 套件管理工具來安裝 Angular CLI,請使用以下指令安裝: npm install -g angular-cli
Dec 1, 2022or
By clicking below, you agree to our terms of service.
New to HackMD? Sign up