Question

我有一个列表，我想在单击按钮（按钮在卡片上）时更改卡片的高度，但是，我该怎么做？

我尝试在click事件上移交item.id，并在函数中使用ID，但是当我想使用(click="details({{item.id}})"时出现错误。

那么我该如何解决这个问题？

此处是html代码：

 <ion-card>
    <ion-card-content class="date-card">
        <h1 class="date">{{date}}</h1>
    </ion-card-content>
</ion-card>
<ion-card *ngFor="let item of items" id="{{item.id}}" >
  <ion-card-content class="content-box">
    <ion-card-title class="title">{{item.label}}</ion-card-title>
    <h2 class="md-text"><ion-icon name="time" ></ion-icon>  {{item.time_start}}</h2>
    <h2 class="md-text"><ion-icon name="calendar" ></ion-icon>  {{item.date_start}}</h2>
    <h2 class="md-text"><ion-icon name="compass" ></ion-icon>  {{item.location_text}}</h2>
  </ion-card-content>
  <div class="icon-div">
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="star"></ion-icon>
    </button>
    <button class="icon-button" (click)="details()">
      <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
    </button>
    <button class="icon-button">
      <ion-icon class="icon-button-icon" name="share"></ion-icon>
    </button>
  </div>
</ion-card>

对不起，我英语不好^^

Answer 1

不带花括号将其传递

(click)="details(item.id)".

Answer 2

您在ngFor的范围内，因此可以使用item变量，只要您在离子卡体内，就可以使用item变量

<ion-card *ngFor="let item of items" id="{{item.id}}" >
  ...
      <button class="icon-button" (click)="details(item.id)">
        <ion-icon class="icon-button-icon" name="arrow-down" ></ion-icon>
      </button>
...
</ion-card>

ngFor Local variables

Answer 3

您在ngFor的范围内，因此可以使用项目变量

namespace Sito{

public partial class MainWindow : Window
{
    public object SqlMethods { get; private set; }

    public MainWindow()
    {
        InitializeComponent();
    }

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        EntitiesSito db = new EntitiesSito();

        getdata();



    }

    private void filtertxbox_TextChanged(object sender, TextChangedEventArgs e)
    {
        string numberofWZ = filtertxbox.Text;


        if (string.IsNullOrEmpty(numberofWZ) )
        {
            getdata();
        }
        else
        {
            EntitiesSito db = new EntitiesSito();

            var query2 = (from a in db.WZ_DWS_SITO
                          where a.WZ.Contains(numberofWZ)
                          orderby a.WZ_DATA descending
                          group a by new { a.WZ, a.KUNNR, a.WZ_DATA } into grp
                          select new
                          {
                              grp.Key.WZ,
                              grp.Key.KUNNR,
                              grp.Key.WZ_DATA,
                              MATERIAL = grp.Count(),
                          }).ToList();

            datagridview.ItemsSource = query2;

        }
    }


    public void getdata()
    {

        EntitiesSito db = new EntitiesSito();

        var query = (from d in db.WZ_DWS_SITO
                     orderby d.WZ_DATA descending
                     group d by new { d.WZ, d.KUNNR, d.WZ_DATA } into grp
                     select new
                     {
                         grp.Key.WZ,
                         grp.Key.KUNNR,
                         grp.Key.WZ_DATA,
                         MATERIAL = grp.Count(),
                     }).ToList();

        datagridview.ItemsSource = query;

    }}}

离子/角度-ngFor在（click）事件上移交item.id

3 个答案: