可观察集合中的动态记录

Question

这是我的模特

public class QMSRejection
{
    public string Id { get; set; }

    public string CardTypeIcon { get; set; }

    public string Date { get; set; }

    public string ShiftMasterId { get; set; }
}

这是我的视图模型，其中有一个函数调用一个包含日期、Id、进程等字段的 API。

public class RejectionDetailsViewModel : BaseViewModel
{
    public ObservableCollection<QMSRejection> RejDetails { get; set; }

    public RejectionDetailsViewModel()
    {
        Function();
    }

    public async void Function()
    {        
        string url = AppSettingsManager.Settings["RejectionUrl"] + "GetList?strkey=30/08/2020";// + DateTime.Now.ToShortDateString();
        var data = await url.GetJsonAsync<List<QMSRejection>>();

        this.RejDetails = new ObservableCollection<QMSRejection>();
        {
            foreach (QMSRejection qms in data)
            {
                this.RejDetails.Add(new QMSRejection()
                {
                    Process = qms.Process,
                    ProductionReferenceId = qms.ProductionReferenceId,
                    Shift = qms.Shift,
                    BackgroundGradientStart = "#d54381",
                    BackgroundGradientEnd = "#7644ad",
                    CardTypeIcon = "Card.png"

                });
            }
        }
    }
}

这个视图模型在 xaml 中被调用，我必须在 itemtemplate 中显示这些记录并在数据模板中调用！

我在 viewmodel 中收到了错误的演员表类型，我不确定我的做法是否正确，因为我必须这样显示所有记录！假设有 100 条记录，因此可观察集合中有 100 条动态记录。

我在 xaml 中调用如下：

  <ContentPage.Content>
        <Grid RowSpacing="0" ColumnSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>

            <!--  ListView displaying saved cards  -->
            <ListView:SfListView x:Name="myCards" AutoFitMode="Height" IsScrollBarVisible="False" ItemSpacing="16,24,16,0" 
                                 SelectionGesture="Tap" SelectionBackgroundColor="Transparent" 
                                 SelectionMode="Single" AllowSwiping="True" 
                               ItemTapped="MyCards_tapped" ItemsSource="{Binding RejDetails}">
                <ListView:SfListView.ItemTemplate>
                    <DataTemplate>
                        <cards:SfCardView CornerRadius="4" HasShadow="True" HeightRequest="150" WidthRequest="300" 
                                              HorizontalOptions="CenterAndExpand">
                            <cards:SfCardView.Content>
                                <Grid>
                                    <gradient:SfGradientView>
                                        <gradient:SfGradientView.BackgroundBrush>
                                            <gradient:SfLinearGradientBrush>
                                                <gradient:SfLinearGradientBrush.GradientStops>
                                                    <gradient:SfGradientStop Color="{Binding BackgroundGradientStart}" 
                                                       Offset="0.0"/>
                                                    <gradient:SfGradientStop Color="{Binding BackgroundGradientEnd}" 
                                                       Offset="1.0"/>
                                                </gradient:SfLinearGradientBrush.GradientStops>
                                            </gradient:SfLinearGradientBrush>
                                        </gradient:SfGradientView.BackgroundBrush>
                                    </gradient:SfGradientView>

                                    <Grid RowSpacing="27" Margin="16,20" >
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="Auto"/>
                                            <RowDefinition Height="*"/>
                                        </Grid.RowDefinitions>

                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                            <ColumnDefinition Width="*"/>
                                        </Grid.ColumnDefinitions>

                                        <!-- Process -->
                                        <Label Grid.Row="0" Grid.ColumnSpan="1" HorizontalOptions="Start"  
                                           VerticalOptions="Center" 
                                           Style="{StaticResource CardLabel}" 
                                           Margin="0,3" Text="{Binding Process}"  />

                                  
                                        <!-- ProductionReference Id -->
                                        <Label Grid.Row="0" Grid.ColumnSpan="3" Text="{Binding ProductionReferenceId}" 
                                         FontSize="16" HorizontalOptions="End"
                                        FontFamily="{StaticResource Montserrat-Medium}" 
                                        TextColor="{DynamicResource Gray-White}"
                                        LineHeight="{OnPlatform Default=-1, Android=1.5}" />

                                        <Grid Grid.Row="1" Grid.ColumnSpan="3">
                                            <!--  Shift  -->
                                            <StackLayout Grid.Column="0" Spacing="0">
                                                <Label Text="{Binding Shift}" Style="{StaticResource CardLabel}" />
                                            </StackLayout>

                                           </Grid>
                                    </Grid>
                                </Grid>
                            </cards:SfCardView.Content>
                        </cards:SfCardView>
                    </DataTemplate>
                </ListView:SfListView.ItemTemplate>
            </ListView:SfListView>

Answer 1

数据的类型为 List<QMSRejection>，您正尝试将其转换为 QMSRejection 实例

你应该像你一样实例化集合：

this.RejDetails = new ObservableCollection<QMSRejection>();

然后循环数据：

foreach (QMSRejection qms in data)
{
    this.RejDetails.Add(new QMSRejection(){
          Process=qms.Process,
          ProductionReferenceId ="NN",
          Shift ="BB",
          BackgroundGradientStart = "#d54381",
          BackgroundGradientEnd = "#7644ad",
          CardTypeIcon = "Card.png"
    });
}

您的属性 RejDetails 应该使用 INotifyPropertyChanged 接口：

 private ObservableCollection rejDetails = null;
 public ObservableCollection RejDetails 
 { 
     get {return rejDetails;}
     set 
     {
         if(rejDetails != value)
         {
            rejDetails = value;
            OnPropertyChanged();
         }
     } 
}

下面是如何实现接口： https://docs.microsoft.com/en-us/dotnet/framework/wpf/data/how-to-implement-property-change-notification