#angular
#angular
Вопрос:
У меня есть два поля (поле 1- Поле 2), я хочу изменить место каждого поля после нажатия на кнопку
[каждый блок является компонентом]
После нажатия
Комментарии:
1. используйте дизайн сетки и измените классы для строк.
2. Я создал для вас образец на stackblitz и обновил свой ответ. проверьте это. надеюсь, это может быть полезно
Ответ №1:
Используя гибкую систему css
Это решение не требует использования ngFor. Вы можете применить его к любым статическим блокам в контейнере.
HTML
<div class="flex-column" [class.reversed]="reversed">
<div class="box box-1">Box 1</div>
<div class="box box-2">Box 2</div>
</div>
<button (click)="reversed = !reversed">Change order</button>
css
.flex-column {
display: flex;
flex-direction: column;
}
.reversed {
flex-direction: column-reverse;
}
Используя директиву Angular ngFor и обратный массив на месте
<div *ngFor="let box of boxes" class="box box-{{box}}">Box {{ box }}</div>
<button (click)="boxes.reverse()">Change order</button>
Ответ №2:
Я создал образец для вас здесь: Stackblitz Использует массив с количеством блоков, например, let boxes = ["box1", "box2"]
и использует ngFor
для рендеринга. после нажатия на кнопку используйте Array.reverse()
, чтобы изменить место. Вот и все!
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public boxes: string[] = ["Box1", "Box2"];
toggle() {
this.boxes.reverse();
}
}
app.component.html
<div class="main-container">
<div class="box-container" *ngFor="let box of boxes">{{box}}</div>
<button class="btn btn-success" (click)="toggle()">Change order</button>
</div>
app.component.css
.box-container {
margin: 10px;
padding: 5px;
border: solid 2px black;
text-align: center;
}