從 MVVM 中的 viewModel 綁定到視圖

Question

我正在處理綁定到包含一些 API 數據的 ViewModel 的 contentView 中的堆棧布局。 但是，堆棧出現兩 (2) 次，因為 API 僅返回 2 個項目。 但細節沒有顯示在視圖上。 我試過“this.bindingContext”和“BindingContext”。 沒有一個在工作。

這是我的模型...

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Text;

namespace AstraPolarisApp.Models
{
    // Root myDeserializedClass = JsonConvert.DeserializeObject<Root>(myJsonResponse); 
    public class AccountDetails
    {
        [JsonProperty("accountNumber")]
        public string AccountNumber { get; set; }

        [JsonProperty("accountName")]
        public string AccountName { get; set; }
        public string phoneNumber { get; set; }
        public string email { get; set; }

        [JsonProperty("accountType")]
        public string AccountType { get; set; }
    }

    public class AcctUserDetails
    {
        public string userId { get; set; }
        [JsonProperty("name")]
        public string Name { get; set; }
        public string email { get; set; }
        public string phoneNumber { get; set; }
    }

    public class LinkedBy
    {
        public string linkedById { get; set; }
        public string name { get; set; }
        public string email { get; set; }
    }

    public class MyAccount
    {
        public string linkerId { get; set; }
        public AccountDetails accountDetails { get; set; }
        public AcctUserDetails acctUserDetails { get; set; }
        public LinkedBy linkedBy { get; set; }
        public string requestTimestamp { get; set; }
    }

    public class Account
    {
        [JsonProperty("payload")]
        public List<MyAccount> Accounts { get; set; }
    }


}

這是我的視圖模型...

using AstraPolarisApp.Helpers;
using AstraPolarisApp.Models;
using AstraPolarisApp.ViewModel;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Net.Http;
using System.Text;

namespace AstraPolarisApp.ViewModels
{
    public class AccountsViewModel : BaseVM
    {
        #region Properties
        private bool isBusy { get; set; }
        public bool IsBusy
        {
            get => isBusy;
            set
            {
                isBusy = value;
                OnPropertyChanged(nameof(IsBusy));

            }
        }

        private ObservableCollection<MyAccount> accountsData;
        public ObservableCollection<MyAccount> AccountsData
        {
            get => accountsData;
            set
            {
                accountsData = value;
                OnPropertyChanged(nameof(AccountsData));

            }
        }

        #endregion

        #region constructor
        public AccountsViewModel()
        {
            LoadMyAccounts();
        }
        #endregion

        #region Functions
        private async void LoadMyAccounts()
        {
            IsBusy = true;
            HttpClient client = new HttpClient();
            var url = Constant.GetLinkedAccountsUrl;
            var response = await client.GetAsync(url);

            var json = await response.Content.ReadAsStringAsync();

            Account userAccounts = JsonConvert.DeserializeObject<Account>(json);
            var sorted = userAccounts.Accounts;
            //getTrans = userTransactions
            var allAccounts = new ObservableCollection<MyAccount>(sorted);
            AccountsData = allAccounts;

            IsBusy = false;

        }
        #endregion
    }


}

這是我的觀點（Xaml）

<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:pv="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView" 
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             x:Class="AstraPolarisApp.Utils.OverlayView">
    
    <ContentView.Content>
        <StackLayout>
            <StackLayout
                     x:Name="OverLayStack"
                    BindableLayout.ItemsSource="{Binding AccountsData}"
                    Orientation="Horizontal"
                    Spacing="10">
                <BindableLayout.ItemTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Frame x:Name="OverStack" HasShadow="True" Margin="10,-40,10,10" 
                                   CornerRadius="5" Padding="10,0,0,10" BackgroundColor="#1B0E7A">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*"/>
                                        <RowDefinition Height="*"/>
                                    </Grid.RowDefinitions>
                                    <StackLayout Grid.Row="0">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <StackLayout Orientation="Vertical" Margin="0,8,0,0" Grid.Column="0" HorizontalOptions="Start">
                                                <Label Text="{Binding AccountType}" x:Name="AcctLbl" FontSize="13" TextColor="#E7E8F0" 
                           HorizontalOptions="Start"/>
                                                <Label Text="{Binding AccountNumber}" x:Name="AcctNo" TextColor="#E7E8F0" FontSize="8"
                           HorizontalOptions="Start"/>
                                            </StackLayout>

                                            <StackLayout Grid.Column="1" Margin="0,-10,0,0"
                                HorizontalOptions="End" VerticalOptions="Center">
                                                <pv:PancakeView HasShadow="True" CornerRadius="0,0,5,0"
                                            Opacity="0.75" HeightRequest="35" 
                                            HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                                                    <pv:PancakeView.BackgroundGradientStops>
                                                        <pv:GradientStopCollection>
                                                            <pv:GradientStop Color="#00FFFFFF" Offset="0"/>
                                                            <pv:GradientStop Color="#90D3CA9C" Offset="1"/>
                                                        </pv:GradientStopCollection>
                                                    </pv:PancakeView.BackgroundGradientStops>
                                                    <Label Text="Default" Margin="55,0,10,0" FontSize="Subtitle" HorizontalOptions="End" VerticalOptions="Center" TextColor="Accent"/>
                                                </pv:PancakeView>
                                            </StackLayout>
                                        </Grid>

                                    </StackLayout>

                                    <StackLayout Grid.Row="1">
                                        <Grid>
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="*"/>
                                            </Grid.ColumnDefinitions>

                                            <StackLayout Grid.Column="0" Orientation="Vertical" HorizontalOptions="Start">
                                                <Label Text="NGN 10,000.00" x:Name="AcctBal" TextColor="White" 
                                                       FontSize="16" FontFamily="{StaticResource font_bold}" FontAttributes="Bold"/>
                                                <Label Text="Available Balance" TextColor="White" FontSize="8"/>
                                            </StackLayout>

                                            <!--<pv:PancakeView Grid.Column="1" Margin="0,0,15,0" CornerRadius="5" HasShadow="False" HeightRequest="35" Padding="10,5,10,5"
                                HorizontalOptions="End" VerticalOptions="Center" BackgroundColor="{StaticResource PrimaryDark}" BorderIsDashed="True">

                                                <ImageButton Grid.Column="1" BackgroundColor="Transparent" Source="tune.png" 
                                    WidthRequest="25" HeightRequest="25" Clicked="OnSettingBtn_Clicked" Aspect="AspectFit"/>
                                            </pv:PancakeView>-->
                                        </Grid>

                                    </StackLayout>
                                </Grid>
                            </Frame>
                        </StackLayout>
                    </DataTemplate>
                </BindableLayout.ItemTemplate>
            </StackLayout>
        </StackLayout>
    </ContentView.Content>
</ContentView>

這是我的 Xaml 代碼后面...

using AstraPolarisApp.PopUps;
using AstraPolarisApp.ViewModels;
using Rg.Plugins.Popup.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace AstraPolarisApp.Utils
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class OverlayView : ContentView
    {
        public OverlayView()
        {
            InitializeComponent();
            //BindingContext = new TransactionViewModel();
            this.BindingContext = new AccountsViewModel();
        }

    }
}

Answer 1

AccountType和AccountNumber是AccountDetails屬性，但您綁定到MyAccount的集合。

編輯：

AccountDetails已經是一員MyAccount ，所以你只要給它綁定任何事情一樣：

<Label Text="{Binding accountDetails.AccountType}" 
       x:Name="AcctLbl" FontSize="13" TextColor="#E7E8F0" HorizontalOptions="Start"/>

<Label Text="{Binding accountDetails.AccountNumber}"
       x:Name="AcctNo" TextColor="#E7E8F0" FontSize="8" HorizontalOptions="Start"/>

附： accountDetails應該真正以大寫字母開頭，因為它是一個屬性。 我很欣賞它會與類名沖突，但您可以將其稱為Details或其他名稱，因為它已經是 MyAccount 的成員，因此您知道它與帳戶有關。

Answer 2

根據@GazTheDestroyer 的回復，我找到了答案。 因此，在使用他提供的方法並意識到它對我不起作用之后，我決定在綁定中添加“路徑”。 這是最終副本...

<Label Text="{Binding Path=Details.AccountType}" 
   x:Name="AcctLbl" FontSize="13" TextColor="#E7E8F0" HorizontalOptions="Start"/>