Angular - 版の履歴

Fukudat: /* Mac OS */

2021-08-20T15:18:57Z

Mac OS

Fukudat: /* sortable table */

2020-06-23T11:02:35Z

sortable table

2020年6月12日 (金) 03:24にFukudatによる

2020-06-12T03:24:11Z

Fukudat: /* Material */

2020-05-24T15:23:40Z

Material

Fukudat: /* Upgrade to version 7 or later */

2020-05-19T15:40:30Z

Upgrade to version 7 or later

Fukudat: /* rxjs */

2020-05-19T08:55:32Z

rxjs

Fukudat: /* sortable table */

2019-08-17T10:20:54Z

sortable table

Fukudat: /* sortable table */

2019-08-15T02:48:31Z

sortable table

Fukudat: /* table */

2019-08-15T02:29:52Z

table

Fukudat: /* 繰り返し要素 */

2019-08-14T10:22:24Z

繰り返し要素

@@ 11行目: / 11行目: @@
 npm で angular/cli をインストール．
 <pre>
-$ npm install --global @angular/core
+$ npm install --global @angular/cli @angular/core
 </pre>

@@ 352行目: / 352行目: @@
+   }
 </pre>
 [[Category:Programming]][[Category:How-To]]

← 古い版		2020年6月12日 (金) 03:24時点における版
353行目:		353行目:
	</pre>		</pre>

−	[[Category:Programming]]	+	[[Category:Programming]][[Category:How-To]]

@@ 148行目: / 148行目: @@
 export class AppModule { }
 </pre>
 == Tips ==

@@ 17行目: / 17行目: @@
 https://www.techiediaries.com/updating-angular-cli-projects/ を参考。
-Version 7.x.x にあげる場合、以下を実行する。
+最新版にあげるなら、以下を実行する。
 <pre>
-$ ng update @angular/cli@7 @angular/core@7
+$ ng update @angular/cli @angular/core
 </pre>
-最新版にあげるなら、
+特定の Version 例えば 7.x.x にあげる場合、
 <pre>
-$ ng update @angular/cli @angular/core
+$ ng update @angular/cli@7 @angular/core@7
 </pre>

@@ 81行目: / 81行目: @@
 <pre>
-$ npm install rxjs rxjs-compat
+$ npm install rxjs
 </pre>

@@ 296行目: / 296行目: @@
 <pre>
 <table mat-table [dataSource]="tableData" matSort (matSortChange)="sortData($event)">
 ... 以下同様
 </pre>

@@ 307行目: / 307行目: @@
      const sort_dir = sort.diretion === 'asc' ? 1 : -1;
      this.tableData = this.tableData.slice();  // データをコピーする。
-     const compare = (a, b) => { return (a < b ? -1 : 1) * sort_dir; }
+     const compare = (a, b) => { return (a < b ? -1 : 1) * sort_dir; };
      switch (sort.active) {
      case 'NAME':

← 古い版		2019年8月15日 (木) 02:29時点における版
290行目:		290行目:
	</pre>		</pre>

		+	=== sortable table ===
		+	上記の[[#table\|table]]をソート可能なテーブルにする。
		+
		+	テンプレートのスニペット:
		+	<pre>
		+	<table mat-table [dataSource]="tableData" matSort (matSortChange)="sortData($event)">
		+	... 以下同様
		+	</pre>
		+
		+	コンポーネント　（xxx.component.ts) のスニペット:
		+	<pre>
		+	import { MatSort, Sort } import from '@angular/material/sort';
		+	...
		+	export class XxxComponent implements OnInit {
		+	sortData(sort: Sort) {
		+	const sort_dir = sort.diretion === 'asc' ? 1 : -1;
		+	this.tableData = this.tableData.slice(); // データをコピーする。
		+	const compare = (a, b) => { return (a < b ? -1 : 1) * sort_dir; }
		+	switch (sort.active) {
		+	case 'NAME':
		+	this.tableData.sort((a, b) => { return compare(a.NAME, b.NAME); }); break;
		+	case 'AGE':
		+	this.tableData.sort((a, b) => { return compare(a.AGE, b.AGE); }); break;
		+	case 'HEIGHT:
		+	this.tableData.sort((a, b) => { return compare(a.HEIGHT, b.HEIGHT); }); break;
		+	default:
		+	break;
		+	}
		+	...
		+	}
		+	</pre>

	[[Category:Programming]]		[[Category:Programming]]

← 古い版		2019年8月14日 (水) 10:22時点における版
230行目:		230行目:

	綺麗なテーブルは[[#table\|table]]参照。		綺麗なテーブルは[[#table\|table]]参照。
		+
		+	=== table ===
		+	Material の table を使うと、ヘッダを固定したり、フッタに集計を表示して、テーブルの中身をスクロールさせたり、カラムをダイナミックに選んだり、行をソートしたりできる。
		+
		+	インストールは [[#Material\|Material]] を参照。
		+
		+	コンポーネント　（xxx.component.ts) のスニペット:
		+	<pre>
		+	class MyRow {
		+	name: string; // カラム1
		+	age: number; // カラム2
		+	height: number; // カラム3
		+	hobby: string; // カラム4
		+	}
		+
		+	export class XxxComponent implements OnInit {
		+	tableData: MyRow[]; // テーブルに表示するデータ
		+	displayedColumns = [ "NAME", "AGE", "HOBBY" ]; // 表示するカラム
		+
		+	ngOnInit() {
		+	// ここである必要はないけど、どこかでデータをセット。外部サービスからデータを入手するの実用的な使い方。
		+	this.tableData = [ { "name": "Andy", "age": 9, "height": 132.5, "hobby": "Video Game" },
		+	{ ... }, ];
		+	}
		+	}
		+	</pre>
		+
		+	テンプレートのスニペット:
		+	<pre>
		+	<table mat-table [dataSource]="tableData">
		+	<!-- NAME column -->
		+	<ng-container matColumnDef="NAME">
		+	<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
		+	<td mat-cell *matCellDef="let row">{{ row.name }}</td>
		+	</ng-container>
		+
		+	<!-- AGE column -->
		+	<ng-container matColumnDef="AGE">
		+	<th mat-header-cell *matHeaderCellDef mat-sort-header>Age</th>
		+	<td mat-cell *matCellDef="let row">{{ row.age }}</td>
		+	</ng-container>
		+
		+	<!-- HEIGHT column -->
		+	<ng-container matColumnDef="HEIGHT">
		+	<th mat-header-cell *matHeaderCellDef mat-sort-header>Height</th>
		+	<td mat-cell *matCellDef="let row">{{ row.height \| number: '.1' }}</td> <!-- フォーマットが \| で指定できる -->
		+	</ng-container>
		+
		+	<!--　HOBBY column -->
		+	<ng-container matColumnDef="HOBBY">
		+	<th mat-header-cell *matHeaderCellDef mat-sort-header>Hobby</th>
		+	<td mat-cell *matCellDef="let row">{{ row.height }}</td>
		+	</ng-container>
		+
		+	<!-- ここで行の繰り返しを指定 -->
		+	<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
		+	<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
		+	<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
		+	</pre>
		+

	[[Category:Programming]]		[[Category:Programming]]