Question

ng对于我来说，当弯曲方向为＆＃34;行＆＃34;时，似乎没有为我工作，我的意思是它有效，但它将物品放在彼此之上而不是并排< / p>

<FlexboxLayout class="itemWindow" *ngFor="let imageUrl of matchItems" 
flexDirection="row">
                <StackLayout class="inventoryImage">
                        <Image width= "80" height="80" stretch="aspectFill" 
                         left="5" src="{{imageUrl}}" ></Image>
                </StackLayout>
</FlexboxLayout >

我做错了什么？还有另一种方法吗？我尝试使用DockLayout，但同样的事情正在发生。

Answer 1

我没有你的组件所以我使用了div，但这个想法几乎是一样的。

<div fxLayout="row"> <!-- extra container with row layout -->
  <div class="itemWindow" *ngFor="let imageUrl of matchItems">
    <div class="inventoryImage">
      <div width= "80" height="80" stretch="aspectFill"
           left="5">{{imageUrl}}</div>
    </div>
  </div>
</div>

Answer 2

我刚刚在listItem之前添加了div标记，并向其中添加了*ngFor而不是FlexboxLayout。而且有效

<FlexboxLayout flexDirection="row">
  <div *ngFor="let filterItem of activityFilters">
    <Label flexGrow="1" class="text-center" [text]="activityFilter[filterItem]"> </Label>
  </div>
</FlexboxLayout>

Flexlayout不能使用* ngfor？

2 个答案: