Question

我正在使用角度4.我添加标志的功能已完成，但是旗帜从左到右出现。

我想要的是图像应该从右到左，点击按钮出现。

<div class="padding-10px" *ngFor="let flag of addedlanguage">
    <img class="flag" [src]="flag" />
</div>

我从数组中获取标志。

Answer 1

在component.ts文件中尝试addedlanguage.reverse()，获取所有标记

Answer 2

可能的解决方案是reverse数组。

像这样：

<div class="padding-10px" *ngFor="let flag of addedlanguage.reverse()">
    <img class="flag" [src]="flag" />
</div>

Answer 3

您可以在css中使用float属性从左到右对齐项目，反之亦然。

在您的代码中，您可以拥有一个名为rightToLeft

的类

.rightToLeft{
   float:right;
 }

然后将此类添加到您的div中

    <button (click)="btnFlag=!btnFlag"></button>
    <div class="padding-10px" [ngClass]={'righttoLeft':btnFlag} *ngFor="let flag of addedlanguage">
      <img class="flag" [src]="flag" />
    </div>

在component.ts文件中创建变量btnFlag:boolean。

有关花车的更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/float

访问演示：https://jsfiddle.net/avinash2618/aotpaeuk/

Answer 4

由于你想要动画，这里是代码

@Component({
  selector: 'my-component',
  template: `
    <div class="padding: -10px" *ngFor="let flag of addedlanguage.reverse()">
      <img class="flag" style="position: relative;" [src]="flag" [@flagAnimation]="flag" />
    </div>
  `,
  animations: [
    trigger('flagAnimation', [
      state('*', style({
        opacity: 1,
        left: '*',
      })),
      state('void',   style({
        opacity: 0,
        left: '100px',
      })),
      transition(':enter', animate('100ms ease-out')),
      transition(':leave', animate('100ms ease-in'))
    ])
  ]
})
export class MyComponent {/* ... */}

这将使您的图像向右对齐，在它们出现时为它们设置动画。

angular 4从右到左点击img

4 个答案: