実現したいこと
Angularで勉強がてらGUIの作成をしています。
チェックボックス、日付、時間を一覧表示するテーブルを作成しようとしています。
参考
こちらのサイトをほぼコピペして実行してみたのですがチェックボックスが全く表示されません。
実行結果は以下の通りです。
何が原因かわからないためお気づきの点ございましたらよろしくお願いします。
発生している問題・エラーメッセージ
特にエラーは発生していません。
該当のソースコード
html
1<div class="block-header">2 <p>オーダー一覧</p>3</div>4<div class="button">5 <div class="toreviewbutton">6 <button igxButton="outlined" routerLink="/review">7 レビュー画面へ 8 </button>9 </div>10 <div class="databutton">11 <button igxButton="outlined">12 データ連携 13 </button>14 </div>15</div>16<hr>17 18<div class="example-container mat-elevation-z8">19 <mat-table #table [dataSource]="dataSource">20 21 <!-- Checkbox Column -->22 <ng-container matColumnDef="select">23 <mat-header-cell *matHeaderCellDef>24 <mat-checkbox (change)="$event ? masterToggle() : null"25 [checked]="selection.hasValue() && isAllSelected()"26 [indeterminate]="selection.hasValue() && !isAllSelected()">27 </mat-checkbox>28 </mat-header-cell>29 <mat-cell *matCellDef="let row">30 <mat-checkbox (click)="$event.stopPropagation()"31 (change)="$event ? selection.toggle(row) : null"32 [checked]="selection.isSelected(row)">33 </mat-checkbox>34 </mat-cell>35 </ng-container>36 37 <ng-container matColumnDef="id">38 <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>39 <mat-cell *matCellDef="let data"> {{data.id}} </mat-cell>40 </ng-container>41 42 <ng-container matColumnDef="day">43 <mat-header-cell *matHeaderCellDef> date </mat-header-cell>44 <mat-cell *matCellDef="let data"> {{data.day}} </mat-cell>45 </ng-container>46 47 <ng-container matColumnDef="time">48 <mat-header-cell *matHeaderCellDef> time </mat-header-cell>49 <mat-cell *matCellDef="let data"> {{data.time}} </mat-cell>50 </ng-container>51 52 <mat-header-row *matHeaderRowDef="columnName"></mat-header-row>53 <mat-row *matRowDef="let row; columns: columnName;" (click)="selection.toggle(row)"></mat-row>54 </mat-table>55</div>56 57<mat-checkbox></mat-checkbox>
css
1.button {2 text-align: center;3}4 5.toreviewbutton {6 display: inline-block;7 margin-right: 100px;8}9 10.databutton {11 display: inline-block;12}13 14 15.example-container {16 display: flex;17 flex-direction: column;18 max-height: 500px;19 min-width: 300px;20}21 22.mat-table {23 overflow: auto;24 max-height: 500px;25}26 27.mat-column-select {28 overflow: visible;29}30
ts
1import { Component } from '@angular/core';2import { SelectionModel } from '@angular/cdk/collections';//チェックボックスように追加3import { MatTableDataSource } from '@angular/material/table';4export interface FoodModel {5 day: string;6 id: number;7 time: string;8}9 10const FOOD_DATA: FoodModel[] = [11 { id: 1, day: '2023/7/25', time: '09:20:15' },12 { id: 2, day: '2023/7/25', time: '09:20:16' },13 { id: 3, day: '2023/7/25', time: '09:20:17' },14 { id: 4, day: '2023/7/25', time: '09:20:18' },15 { id: 5, day: '2023/7/25', time: '09:20:19' },16 { id: 6, day: '2023/7/25', time: '09:20:20' },17 { id: 7, day: '2023/7/25', time: '09:20:21' },18 ];19 20 21@Component({22 selector: 'order-component',23 templateUrl: './order.component.html',24 styleUrls: ['./order.component.css']25})26 27export class OrderComponent {28 columnName = ['id', 'day', 'time'];29 dataSource = new MatTableDataSource<FoodModel>(FOOD_DATA);30 selection = new SelectionModel<FoodModel>(true, []);31 32 33 isAllSelected() {34 const numSelected = this.selection.selected.length;35 const numRows = this.dataSource.data.length;36 return numSelected === numRows;37 }38 39 40 masterToggle() {41 this.isAllSelected() ?42 this.selection.clear() :43 this.dataSource.data.forEach(row => this.selection.select());44 }45}46 47
補足情報（FW/ツールのバージョンなど）
Package Version
@angular-devkit/architect 0.1601.6
@angular-devkit/build-angular 16.1.6
@angular-devkit/core 16.1.6
@angular-devkit/schematics 16.1.6
@angular/cdk 16.1.6
@angular/cli 16.1.6
@angular/material 16.1.6
@schematics/angular 16.1.6
rxjs 7.8.1
typescript 5.1.6
zone.js 0.13.1
0 コメント