时间戳

首页 > 解决方案 > fxLayout 不工作，任何解决此问题的建议

angular - fxLayout 不工作，任何解决此问题的建议

问题描述

我正在尝试水平而不是垂直显示 *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;
    });

  }

}

标签： angularangular-materialangular-directive

解决方案

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

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

@NgModule({
imports: [FlexLayoutModule]
})

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

推荐阅读