Angular Material 早餐 Demo－~

早餐清單

=ts=

import { Component, OnInit } from '@angular/core';
import {
MatButtonModule, MatCheckboxModule, MatMenuModule, MatSelectModule
, MatInputModule, MatDatepickerModule, MatNativeDateModule
, MatDialogModule, MatAutocompleteModule, MatListModule, MatLineModule, MatIconModule,
MatProgressBarModule, MatPaginator, MatTabChangeEvent, MatSnackBarModule, MatSnackBar,
MatSnackBarConfig, MatCardModule, MatToolbarModule
} from '@angular/material';
import { MatTableDataSource, MatTableModule, MatSortModule, MatPaginatorModule } from '@angular/material';
import { Observable } from 'rxjs/Observable';
import { environment } from '../../../environments/environment';
import { TransferService } from '../transfer/transfer.service';
import { forEach } from '@angular/router/src/utils/collection';

@Component({
selector: 'app-cancel',
templateUrl: './cancel.component.html',
styleUrls: ['./cancel.component.css']
})
export class CancelComponent implements OnInit {
data;
options;
menuModel;
breakfastMenu;
breakfastMenuDetail;
temp_data;
_return: Dataclass[];
selectedRowIndex;

constructor(
private transferService: TransferService) {
this._return = [];
}

ngOnInit() {
this.breakfastMenu = settingmodel.MENU_GROUP;
this.breakfastMenuDetail = settingmodel.MENU_DETAIL;
this.data = settingmodel.data;
this.menuModel = new BreakfastClass();
}

getRow (p_data: any, row_i: number) {
// console.log(p_data);
// console.log(this.breakfastMenuDetail);
this.selectedRowIndex = row_i;
}

Save(datas: any) {
console.log(this.data);
this._return = [];
if (Array.isArray(datas)) {
console.log('array');
datas.forEach(x => {
console.log(x);
this.transferService.savceService(x).subscribe(item => {
this._return.push(item);
});
});
} else {
console.log('object');
this.transferService.savceService(datas).subscribe(item => { this._return.push(item); });
}
// console.log(datas);
}

singleSelect(i, selected: string) {
this.data[i].options.forEach(x => {
if (x.title !== selected) {
x.values = false ;
}
});
}
}

export class Dataclass {
KEY_NO: number;
QUESTIONS: string;
SELECT_KEY: number;
MEMO: string;
title: string;
values: boolean;
options: any;
}

export class BreakfastClass {
KEY_NO: number;
F_KEY_NO: number;
GROUP_NAME: string;
MEMO: string;
PRODUCT: string;
VALUE: number;
}

export const settingmodel = {

MENU_GROUP: [
{
KEY_NO: 1,
GROUP_NAME: '三明治'
}, {
KEY_NO: 2,
GROUP_NAME: '漢堡'
}, {
KEY_NO: 3,
GROUP_NAME: '吐司'
}, {
KEY_NO: 4,
GROUP_NAME: '點心'
}, {
KEY_NO: 5,
GROUP_NAME: '飲料'
},
],
MENU_DETAIL: [
{
F_KEY_NO: 1,
PRODUCT: '鮪魚三明治',
VALUE: 0
},
{
F_KEY_NO: 1,
PRODUCT: '玉米三明治',
VALUE: 0
},
{
F_KEY_NO: 2,
PRODUCT: '培根漢堡',
VALUE: 0
},
{
F_KEY_NO: 2,
PRODUCT: '蔬菜起司漢堡',
VALUE: 0
},
{
F_KEY_NO: 2,
PRODUCT: '滿福堡',
VALUE: 0
},
{
F_KEY_NO: 2,
PRODUCT: '豬肉滿福堡',
VALUE: 0
},
{
F_KEY_NO: 3,
PRODUCT: '巧克力吐司',
VALUE: 0
},
{
F_KEY_NO: 3,
PRODUCT: '花生吐司',
VALUE: 0
},
{
F_KEY_NO: 3,
PRODUCT: '草莓吐司',
VALUE: 0
},
{
F_KEY_NO: 4,
PRODUCT: '炸雞塊',
VALUE: 0
},
{
F_KEY_NO: 5,
PRODUCT: '美式咖啡',
VALUE: 0
},
{
F_KEY_NO: 5,
PRODUCT: '冰奶茶',
VALUE: 0
}
],

data : [
{
KEY_NO: 1, QUESTIONS: '課程安排', SELECT_KEY: 10,
options: [
{ title: '非常滿意', checked: false },
{ title: '滿意', checked: false },
{ title: '普通', checked: false },
{ title: '差', checked: false }]
, MEMO: ''
},
{
KEY_NO: 2, QUESTIONS: '課程地點', SELECT_KEY: 20,
options: [
{ title: '非常滿意', checked: false },
{ title: '滿意', checked: false },
{ title: '普通', checked: false },
{ title: '差', checked: false }]
, MEMO: ''
},
{
KEY_NO: 3, QUESTIONS: '課程時間', SELECT_KEY: 30,
options: [
{ title: '非常滿意', checked: false },
{ title: '滿意', checked: false },
{ title: '普通', checked: false },
{ title: '差', checked: false }]
, MEMO: ''
}
] };

=html=

<div *ngFor="let row1 of breakfastMenu; index as i;">
<mat-card class="example-card" style="max-width: 400px; height: 300px;
 border-bottom-style: groove;
 border-color: rgba(219, 216, 216, 0.897);
 padding: 0;
 margin-left: 5%; 
 margin-top: 2px;">
<mat-toolbar [(ngModel)]="row1.GROUP_NAME" style="background-color: rgb(223, 217, 217); height: 40px;; color:floralwhite;">{{row1.GROUP_NAME}} </mat-toolbar>
<mat-list role="list">
<!-- <mat-list-item role="listitem"> {{row1.KEY_NO }}</mat-list-item> -->
<div *ngFor="let row2 of breakfastMenuDetail; index as i_2; "[ngClass]="{'highlight': selectedRowIndex == i_2}">
<mat-list-item *ngIf="row2.F_KEY_NO == row1.KEY_NO" role="listitem" (click)="getRow(row2,i_2)">
<!-- {{row.F_KEY_NO}} -->
{{row2.PRODUCT}}
<input style="width: 60px ;padding-right: 0%; position:absolute; right:0px;"
min="0" max="10"
[(ngModel)]="row2.VALUE"
matInput type="number"
placeholder="Value" >
</mat-list-item>
</div>
</mat-list>
</mat-card>
</div>


<div *ngFor="let row of breakfastMenuDetail">
<div *ngIf="row.VALUE > 0">
{{row.F_KEY_NO}}
{{row.PRODUCT}}
{{row.VALUE}}
</div>
</div>