javascript - Angular 2+ 基于点击在元素之间切换

Question

因此，我尝试使用一种 Angular 方式将创建的按钮发送到 #start 或 #finish div，基于对所选按钮的单击，因此在某种程度上，如果可以的话，它们会发送自己遵循一个条件，在本例中是位于 #start 或 #finish div 内部。使用 Jquery，我只需检查某个元素的父元素是什么，如果匹配一个元素，我将其发送给另一个元素，反之亦然。现在有了 Angular，我一直在研究整体、渲染和其他东西，但我的头脑不能只理解整体图片，即使我能够单击并将单击的元素发送到不同的 div，我也无法'不要对创建的其他按钮以及另一个 div 中第一次单击的按钮执行此操作。

<div class="ui raised very padded text container segment" 
  #finish>
    </div> 
<div class="ui raised very padded text container segment" #start>
    <button 
    *ngFor='let word of ge_array' 
    (click)="goToNext()" 
    >{{word}}</button>
  </div>

有人知道如何解决这种情况吗？

Answer 1

Renan，我会改变你所有的计划。我有一个元素数组。该元素有一个属性“place”。我将在两个 div 中显示，一个显示“plan1”，另一个显示“plan2”。

//the .ts is like
items:any[]=[{word:'uno',place:1},{word:'dos',place:1},{word:'tres',place:2}]

get items1(){
  return this.items.filter(it=>it.place==1);
}
get items2(){
  return this.items.filter(it=>it.place==2);
}

//the .hmtl like
<h2>place 1</h2>
  <button  *ngFor="let item of items1" (click)="item.place=2">{{item.word}}</button>
<h2>place 2</h2>
<button  *ngFor="let item of items2" (click)="item.place=1">{{item.word}}</button>

我更喜欢使用 getter 并拥有“item1”和“item2”。单击使该项目的属性“place”在 place 1 中变为 2，在 place2 中变为 1

您可以使用 *ngIf 来在同一个数组上创建两个 *ngFor

<h1>place 1</h1>
<div *ngFor="let item of items">
  <button *ngIf="item.place==1" (click)="item.place=2">{{item.word}}</button>
</div>
<h1>place 2</h1>
<div *ngFor="let item of items">
  <button *ngIf="item.place==2" (click)="item.place=1">{{item.word}}</button>
</div>

忘记 setter/getter