角度4从右到左添加img onclick答案

【问题标题】：angular 4 add img from right to left onclick角度4从右到左添加img onclick
【发布时间】：2018-06-20 13:31:18
【问题描述】：

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

我想要的是在点击按钮时应该从右到左显示图像。

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

我正在从一个数组中获取标志。

【问题讨论】：

当您说from right to left 时，您的意思是您的图像应该被反转，或者您的意思是最后添加的图像应该在左边？
我想要的是在点击按钮时图像应该从右到左显示。你的意思是img应该从右到左动画吗？
是的，我的意思是最后一张图片应该在左边，应该从右到左动画@Brampage
@RajRana 看看我的answer，如果你想要图像的过渡/动画，看看这个plunker和这个answer。
是的，最后一张图片应该在左边@trichetriche

标签： html css angular

【解决方案1】：

既然你想要动画，这里是代码

@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 {/* ... */}

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

【讨论】：

图片应该从右到左出现，表示最先添加的图片应该在右边，最后添加的图片应该出现在左角
那么请随时编辑我的帖子，完成后告诉我，以便我接受！
哦，那太好了：D

【解决方案2】：

您可以在 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/

【讨论】：

感谢在这个演示的帮助下，我做了一些改变，我明白了

【解决方案3】：

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

像这样：

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

【讨论】：

【解决方案4】：

在您获取所有标志的 component.ts 文件中尝试addedlanguage.reverse()

【讨论】：