fxLayout не работает, любые предложения по исправлению - PullRequest
Новая
       13

fxLayout не работает, любые предложения по исправлению

0 голосов
/ 05 апреля 2020

Я пытаюсь отобразить * ngFor l oop данные по горизонтали, а не по вертикали. Я пытаюсь использовать 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;
    });

  }

}

1 Ответ

0 голосов
/ 05 апреля 2020

Я думаю, что вы не можете импортировать FlexLayoutModule в модуль, содержащий этот компонент. Если он находится в модуле приложения, добавьте следующий код в app.module.ts: 

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

@NgModule({
imports: [FlexLayoutModule]
})

Вам необходимо импортировать модуль flexLayoutModule в модуль, содержащий компонент, чтобы использовать макет flex.

...