如何在Angular中切換卡片頁腳

Question

有幾張卡片。 每張卡都有一個“查看評論”按鈕。 我想打開點擊了“查看評論”的特定卡的頁腳。 現在，單擊“查看評論”即可打開所有卡。

export class MenuComponent implements OnInit {

  public hideComments: boolean;

  dishes: Dish[] = [
    {
      name: 'Uthappizza',
      image: '/assets/img/Utthapizza.jpg',
      category: 'mains',
      label: 'Hot',
      price: '4.99',
      // tslint:disable-next-line:max-line-length
      description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
      comments: [
        {
            rating: 5,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
            author: 'Paul McVites',
            date: '2014-09-05T17:57:28.556094Z'
        },
        {
            rating: 3,
            comment: 'Eat it, just eat it!',
            author: 'Michael Jaikishan',
            date: '2015-02-13T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Ultimate, Reaching for the stars!',
            author: 'Ringo Starry',
            date: '2013-12-02T17:57:28.556094Z'
        },
        {
            rating: 2,
            comment: 'It\'s your birthday, we\'re gonna party!',
            author: '25 Cent',
            date: '2011-12-02T17:57:28.556094Z'
        }
    ]
    },
    {
      name: 'Zucchipakoda',
      image: '/assets/img/Zucchipakoda.JPG',
      category: 'appetizer',
      label: '',
      price: '1.99',
      description: 'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
      comments: [
        {
            rating: 4,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        },
        {
            rating: 5,
            comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
            author: 'Paul McVites',
            date: '2014-09-05T17:57:28.556094Z'
        },
        {
            rating: 3,
            comment: 'Eat it, just eat it!',
            author: 'Michael Jaikishan',
            date: '2015-02-13T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Ultimate, Reaching for the stars!',
            author: 'Ringo Starry',
            date: '2013-12-02T17:57:28.556094Z'
        },
        {
            rating: 1,
            comment: 'It\'s your birthday, we\'re gonna party!',
            author: '25 Cent',
            date: '2011-12-02T17:57:28.556094Z'
        }
    ]
    },
    {
      name: 'Vadonut',
      image: '/assets/img/Vadonut.jpg',
      category: 'appetizer',
      label: 'New',
      price: '1.99',
      description: 'A quintessential ConFusion experience, is it a vada or is it a donut?',
      comments: [
        {
            rating: 1,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        },
        {
            rating: 2,
            comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
            author: 'Paul McVites',
            date: '2014-09-05T17:57:28.556094Z'
        },
        {
            rating: 3,
            comment: 'Eat it, just eat it!',
            author: 'Michael Jaikishan',
            date: '2015-02-13T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Ultimate, Reaching for the stars!',
            author: 'Ringo Starry',
            date: '2013-12-02T17:57:28.556094Z'
        },
        {
            rating: 2,
            comment: 'It\'s your birthday, we\'re gonna party!',
            author: '25 Cent',
            date: '2011-12-02T17:57:28.556094Z'
        }
    ]
    },
    {
      name: 'ElaiCheese Cake',
      image: '/assets/img/ElaiCheese.jpg',
      category: 'dessert',
      label: '',
      price: '2.99',
      description: 'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
      comments: [
        {
            rating: 5,
            comment: 'Imagine all the eatables, living in conFusion!',
            author: 'John Lemon',
            date: '2012-10-16T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Sends anyone to heaven, I wish I could get my mother-in-law to eat it!',
            author: 'Paul McVites',
            date: '2014-09-05T17:57:28.556094Z'
        },
        {
            rating: 3,
            comment: 'Eat it, just eat it!',
            author: 'Michael Jaikishan',
            date: '2015-02-13T17:57:28.556094Z'
        },
        {
            rating: 4,
            comment: 'Ultimate, Reaching for the stars!',
            author: 'Ringo Starry',
            date: '2013-12-02T17:57:28.556094Z'
        },
        {
            rating: 2,
            comment: 'It\'s your birthday, we\'re gonna party!',
            author: '25 Cent',
            date: '2011-12-02T17:57:28.556094Z'
        }
    ]
    }
   ];

  public toggleComments(event){
      console.log(event.target)
    this.hideComments = !this.hideComments;
  }

  constructor() { 

  }

  ngOnInit() {
    this.hideComments = false;
   } 



}

<div class="container-fluid p-5">
  <div class="row">
    <h3 style="color: black"><span style="border-bottom: 2px solid grey">Menu</span></h3>
  </div>

  <div class="row mt-4">
    <div class="col-md-3" *ngFor="let dish of dishes">
        <div class="card shadow" style="height: 100%">
            <img src="{{dish.image}}" class="card-img-top" style="height: 300px">
            <div class="card-body">
              <div class="dish-info" style="height: 150px">
                  <h5 class="card-title">{{dish.name}}</h5>
                  <p class="card-text">{{dish.description}}</p>
              </div>
              <small class="float-right" [hidden]="!!this.hideComments" (click)="toggleComments($event)">View Comments...</small>
              <small class="float-right" [hidden]="!this.hideComments" (click)="toggleComments($event)">Close Comments...</small>
            </div>
            <div class="card-footer" [hidden]="!this.hideComments" style="height: 200px; overflow: scroll">
              <div *ngFor="let comment of dish.comments">
                  <div class="media">
                      <img src="assets/img/user.png" class="mr-2" style="height: 35px; width: 40px">
                      <div class="media-body">
                        <h6 class="mt-0">{{comment.author}}</h6>
                        <p style="font-size: 12px; color:#21252991">{{comment.comment}}</p>
                        <small class="float-left" style="color: #6b8096">{{comment.date | date}}</small>
                        <small class="float-right" style="color: #6b8096">Rating: {{comment.rating}}/5</small>
                      </div> 
                    </div>
                    <hr>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

僅點擊了“查看評論按鈕”的特定卡片。 現在，當我單擊“查看評論”時，所有的頁腳都在打開。

Answer 1

因為所有卡共享相同的狀態（ hideComments ，這是一個值），所以當您單擊特定卡時，所有卡都將打開和關閉。 如果你想有自己的狀態的卡，你應該使用的指數dishes ：

...
<div class="col-md-3" *ngFor="let dish of dishes; let i=index">
...

然后，您可以在toggleComments方法中使用索引，該索引是通過單擊特定的卡片操作觸發的。 當然hideComments應該是boolean數組。