server select

src/app/app.module.ts

@@ -41,6 +41,7 @@ import * as Raven from 'raven-js';
 import { DecksComponent } from './decks/decks.component';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { LogoutDialogComponent } from './logout-dialog/logout-dialog.component';
+import { ServerSelectComponent } from './server-select/server-select.component';
 
 export class RavenErrorHandler implements ErrorHandler {
   handleError(err: any): void {
@@ -69,7 +70,8 @@ if (environment.production) {
     ResultDialogComponent,
     DecksComponent,
     ConfirmDialogComponent,
-    LogoutDialogComponent
+    LogoutDialogComponent,
+    ServerSelectComponent
   ],
   imports: [
     BrowserModule,

src/app/server-select/server-select.component.css

+mat-form-field {
+  width: 80px;
+}
+
+mat-select::ng-deep .mat-select-arrow-wrapper {
+  transform: initial;
+}
+
+mat-form-field::ng-deep .mat-form-field-underline {
+  display: none;
+}
+
+mat-form-field::ng-deep .mat-form-field-wrapper, mat-form-field::ng-deep .mat-form-field-flex {
+  padding: initial;
+}
+
+mat-form-field::ng-deep .mat-form-field-infix {
+  padding: initial;
+  border: initial;
+}

src/app/server-select/server-select.component.html

+环境: <mat-form-field appearance='standard'>
+<!--  <mat-label>Favorite food</mat-label>-->
+  <mat-select>
+    <mat-option *ngFor='let server of servers' [value]='server.id'>
+      {{server.name}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/server-select/server-select.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-server-select',
+  templateUrl: './server-select.component.html',
+  styleUrls: ['./server-select.component.css']
+})
+export class ServerSelectComponent implements OnInit {
+
+  servers = [{ id: 'mycard', name: '标准' }, { id: 'test', name: '测试' }];
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/toolbar/toolbar.component.css

@@ -2,3 +2,7 @@ button {
   margin-left: -8px;
   margin-right: 24px;
 }
+
+span {
+  flex: 1
+}

src/app/toolbar/toolbar.component.html

@@ -3,4 +3,5 @@
     <mat-icon>arrow_back</mat-icon>
   </button>
   <span><ng-content></ng-content></span>
+  <app-server-select></app-server-select>
 </mat-toolbar>