Angular mat选择“不可见”，直到单击它，如何设置默认值

Question

我遇到了与使选定的mat工作相关的树问题（请不要让我问3个问题，因为它们都是相关的）

1. 在单击空白区域之前，控件不可见

忽略按钮下方的红色消息只是一个提醒

单击空白区域时，将显示选择选项。

选择后，控件处于无效模式

没有任何控制台/角度误差

这里是组件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-game-round',
  templateUrl: './game-round.component.html',
  styleUrls: ['./game-round.component.css']
})
export class GameRoundComponent implements OnInit {
  moves : string[] = [];
  selectedMove: string = 'Rock';

  currentRoundInfo = new FormGroup({
    moves: new FormControl('', [Validators.required]),
  });
  constructor(
    private router:Router) { }

  ngOnInit(): void {
    this.backService.getGameMoves()
      .subscribe((data: string[]) => {
        this.moves = data;
        //this.currentRoundInfo.setValue({moves : data}) ;
        console.log(`getGameMoves:${this.moves}`);
      });
      
    //trying to set a defult value
      this.currentRoundInfo.setValue({
        moves: 'Paper'
      });

  }

  moveSelected(move: string) {
    console.log("moveSelected:" + move) ;
    this.selectedMove = move ;
  }

  onSubmit() {
    console.log("next") ;
    
  }
}

这是HTML

<div class="full-width-centered">
  <form [formGroup]="currentRoundInfo" (ngSubmit)="onSubmit()">
    <div class="full-width" >
      <mat-form-field floatLabel="never" appearance="outline">
        <mat-label>Select your move:</mat-label>
        <mat-select [(value)]="selectedMove" formControlName="moves" placeholder="test placeholder" (selectionChange)="moveSelected($event.value)">
          <mat-option  *ngFor="let m of moves" [value]="m">
            {{m}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    <br>
    <div>
      <button type="submit">NEXT</button>
    </div>
  </form>
</div>

我在第一期中发现了另一个问题，但没有给出答案。

Matt-Select直到我点击它才显示

我还尝试了许多其他类似的答案，但没有成功（将floatlabel更改为always并设置占位符值）

Answer 1

似乎“选择”的角度材质默认样式不起作用，所以我决定覆盖它。

.mat-select {
    border: 1px solid lightseagreen !important ;
    background: lightseagreen;
    height: 30px !important;
}

设置默认值是可行的，但由于select不可见，我看不到

//Set de default value
this.currentRoundInfo.setValue({
    movesControl: 'rock' 
});

要保持选定的值，只需存储在组件属性中，并将其绑定到选择：

<mat-select [(value)]="selectedMove"

更新：重新安装角度/材料并重新启动ng serve也有帮助

因此，在进行更多造型之后，这就是它的外观：

Answer 2

您需要添加一个区域。区域提供跨异步任务持久化的执行上下文。

import {Component, OnInit, NgZone} from '@angular/core';

 

constructor(
    private router: Router,
    private zone: NgZone
) { }

 

this.backService.getGameMoves()
  .subscribe((data: string[]) => {
    this.zone.run(() => {
        this.moves = data;
    });
    //this.currentRoundInfo.setValue({moves : data}) ;
    console.log(`getGameMoves:${this.moves}`);
  });

这应该可以解决您的问题。我无法通过测试来验证，因为我无法访问您的服务或代码链接进行测试，但我已经在自己的类似场景中进行了测试。