fxLayout 不工作，任何解决这个问题的建议

Question

我正在尝试水平而不是垂直显示 *ngFor 循环数据。我正在尝试为此使用 fxLayout="row" 但它不起作用。我正在复制我的 html 和下面的组件文件代码。我想在这里包含任何东西吗？有没有其他方法可以达到同样的效果？

HTML代码：

<div fxLayout="row" fxLayoutAlign="space-around center">
    Plyers joined: 
    <div *ngFor = "let player of playerslist">
        <button class="button1">{{player.playername}}</button>
    </div>
</div>

组件文件代码：

import { Component, OnInit, Input } from '@angular/core';
import { FlexModule } from '@angular/flex-layout';
import { Directionality } from '@angular/cdk/bidi'
import { BrowserModule } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { PlayerService } from '../../../services/player.service';
import { Player } from '../../../schema/player';

@Component({
  selector: 'app-playerlist',
  templateUrl: './playerlist.component.html',
  styleUrls: ['./playerlist.component.css'],
  providers: [ PlayerService ]
})
export class PlayerlistComponent implements OnInit {

  @Input() gameid: string;

  playerslist = [];

  constructor(private playerService: PlayerService) { }

  ngOnInit(): void {
    this.playerslist = [];
    this.gameid="69067"; //hardcoded for testing
    this.getPlayers(this.gameid);
  }

  getPlayers(p1) {

    this.playerService.getPlayerByGame(p1).subscribe( 
      (data) => {this.playerslist = data;

    return this.playerslist;
    });

  }

}

Answer 1

我认为您可能没有在包含此组件的模块中导入 FlexLayoutModule。如果是在App Module中，在app.module.ts中添加如下代码：

import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
imports: [FlexLayoutModule]
})

您需要在包含组件的模块中导入 flexLayoutModule 才能使用 flex 布局。

fxLayout 不工作，任何解决这个问题的建议

fxLayout is not working, any suggestions for fixing this

angular-directive

angular-material

angular