Angular mat-select 在单击之前不可见，如何设置默认值答案

【问题标题】：Angular mat-select invisible until you click on it, how to set a default valueAngular mat-select 在单击之前不可见，如何设置默认值
【发布时间】：2021-03-10 15:20:16
【问题描述】：

我遇到了与制作所选垫子相关的树问题（请不要让我问 3 个问题，因为它们都是相关的）

在我单击空白区域之前，该控件不可见
无论我选择什么，所选选项都不会显示（不保留）
也许第一个问题可以通过选择默认选项来解决

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

当我点击空白处时，会出现选择选项。

选择后控件处于无效模式

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

这是组件

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>

我发现这个问题是第一个问题，但没有提供答案。

mat-select doesn't display until i click on it

我也尝试了许多其他类似的答案，但都没有运气（将浮动标签更改为始终并设置占位符值）

【问题讨论】：

标签： angular angular-material

【解决方案1】：

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

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}`);
  });

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

【讨论】：

感谢您的回答，在我的情况下，重新安装 angular material 解决了问题，请看我的回答
@MauricioGraciaGutierrez 虽然很高兴您找到了适合您需求的解决方案，但 Angular 认为使用区域作为首选解决方案。如果你没有为你的组件使用响应式表单，你将无法访问额外的异步功能。对于寻找同一问题的解决方案的任何其他用户，他们将需要一个更通用的解决方案。此解决方案也适用于使用 *ngIf 的元素在可观察订阅者中的逻辑状态发生更改时，这可能不会反映在布局中。
随意尝试复制问题并测试您的解决方案 - 这是代码库github.com/mauriciogracia/GoD_frontend，它取决于后端github.com/mauriciogracia/GoD_backend
据我所知，我使用的是响应式表单。
@MauricioGraciaGutierrez 是的，但是如果其他人来这里寻找相同问题的解决方案，但没有使用反应式表单，他们将有一个解决问题的方法，他们不需要添加反应式表格。

【解决方案2】：

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

.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"

更新：重新安装 angular/material 并重新启动 ng serve 也有帮助

所以在更多样式之后，它看起来是这样的：

【讨论】：