从 *ngFor 中的按钮更改数组

Question

我有 3 个按钮 let link of links

links = [
    {
      name: "Link 1",
      id: "number1"
    },
    {
      name: 'Link 2',
      id: "number2"
    }
    {
      name: "Link 3",
      id: "number3"
    }
  ]

他们在 HTML 中呈现 3 个按钮。

我有一个 DIV 和 "let card of number1":

number1 = [
    {
      name: 'IT',
      address: 'Tokyo 4',
    },
    {
      name: 'Computer',
      address: 'Tokyo 4',
    },
    {
      name: 'Garden',
      address: 'Tokyo 4',
    },
    {
      name: 'Cars',
      address: 'Tokyo 4',
    }
  ]

他们用 H1 {{ card.name }} 渲染 DIV，用 {{ card.address }}

渲染 P

但是，当我点击按钮 2 时，如何将 let card of number1 更改为 let card of number2？像这样：

(click)="change number1 to number2" - when I click button number 2 etc

笨蛋： https://plnkr.co/edit/MfSx9MjoVtHprFtBHKDZ?p=preview

Answer 1

指向不同的数组变量并在单击按钮时切换引用。 This is your plunker 这样做。

//our root app component
import {Component, NgModule, OnInit, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <li *ngFor="let link of links">
      <button (click)="updateLinks(link.id)">{{ link.name }}</button>
    </li>

    <div *ngFor="let card of numbers">
      <h1>{{ card.name }}</h1>
      <p>{{ card.address }}</p>
    </div>
  `,
})
export class App implements OnInit {

  numbers: any[];

  ngOnInit(){
    this.numbers = this.number1;
  }

  updateLinks(linkId: string){
    this.numbers = this[linkId] as any[];
  }

  links = [
    {
      name: "Link 1",
      id: "number1"
    },
    {
      name: 'Link 2',
      id: "number2"
    }
    {
      name: "Link 3",
      id: "number3"
    }
  ]



  number1 = [
    {
      name: 'IT',
      address: 'IT Number 1',
    },
    {
      name: 'Computer',
      address: 'Computer Number 1',
    },
    {
      name: 'Garden',
      address: 'Garder Number 1',
    },
    {
      name: 'Cars',
      address: 'Cars Number 1',
    }
  ]



  number2 = [
    {
      name: 'IT',
      address: 'IT Number 2',
    },
    {
      name: 'Computer',
      address: 'Computer Number 2',
    },
    {
      name: 'Garden',
      address: 'Garder Number 2',
    },
    {
      name: 'Cars',
      address: 'Cars Number 2',
    }
  ]



  number3 = [
    {
      name: 'IT',
      address: 'IT Number 3',
    },
    {
      name: 'Computer',
      address: 'Computer Number 3',
    },
    {
      name: 'Garden',
      address: 'Garder Number 3',
    },
    {
      name: 'Cars',
      address: 'Cars Number 3',
    }
  ]


}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 2

您可以创建多个按钮并displaying/hiding有条件地创建它们？

  <button *ngIf="arrayNumber === 1" (click)="myFirstFunction()"></button>
  <button *ngIf="arrayNumber === 2" (click)="mySecondFunction()"></button>

Answer 3

另一种方法：

HTML:

 <li *ngFor="let link of links; let i = index">
      <button (click)="setNumber(i)">{{ link.name }}</button>
 </li>

打字稿：

...
number;
....
constructor(){
    this.number=this.number1
}

...
setNumber(index){
  console.log(index)
  switch(index){
    case 0:
      this.number = this.number1;
      break;
    case 1:
      this.number = this.number2;
      break;
    case 2:
      this.number = this.number3
  }
}

DEMO

从 *ngFor 中的按钮更改数组

Change array from button inside *ngFor

javascript

arrays

typescript

ngfor

angular