xamarin 表单选择器将所选值绑定到 NgModel，如 angular

Question

我有一个 JSON 类型的用户实体动态模型。我需要用下拉列表向 select 值 foreach 属性显示一个表单，然后插入到数据库中。就像一个用户实体有属性性别和年龄（属性可以由客户在尾页编辑）。示例结果如下：

[
      {
        "bindValue": null,
        "title": "sex",
        "code":"sex",
        "property": {
          "option": [
            "male",
            "female"
          ]
        }
      },
      {
        "bindValue": null,
        "code":"grade",
        "property": {
          "option": [
            "2",
            "3"
          ]
        }
      }
    ]

使用 angular 离子项目我可以用这个编码：

    <ng-container *ngFor="let x of dynamicdroplist">
      <ion-item>
        <ion-label fixed>{{x.title}}</ion-label>
        <ion-select [(ngModel)]="x.bindValue">
          <ion-select-option *ngFor="let y of x.property.option" value="{{y}}">{{y}}</ion-select-option>
        </ion-select>
      </ion-item>
    </ng-container>

当用户更改 select 值时，它会将 "ngModel" 绑定到 x.bindvalue，我可以过滤代码和二进制值数据以发送到 api。

但是对于 xamarin 表单，我不知道如何将 select 值绑定到 bindvalue

foreach(var item in field){
     StackLayout layout = new StackLayout().LoadFromXaml("<StackLayout></StackLayout>");
     layout.Children.Add(new Label().LoadFromXaml("<Label Text=\"" + item.Title + "\"></Label>"));
     var picker = new Picker { Title = item.Title };
     foreach (var e in item.Property.option)
     {
          picker.Items.Add(e);
     }          
     layout.Children.Add(picker);
      _stackLayout.Children.Add(layout);
}

我想知道如何使用 xamarin 表单对此进行编码？

Answer 1

如果您以编程方式需要该值，只需使用您声明的选择器变量访问它；

picker.SelectedItem

否则如果你想把它绑定到UI，你可以；

myLabel.SetBinding(Label.TextProperty, new Binding("SelectedItem", source: picker));

Answer 2

您可以将 Picker.SelectedItem 绑定到 TwoWay 中的 bindValue，然后如果用户更改 select 值，模型中的 bindValue 将更新:

 picker.BindingContext = item;
 picker.SetBinding(Picker.SelectedItemProperty, "bindValue",mode:BindingMode.TwoWay);

您可以参考以下示例代码：

public partial class MainPage : ContentPage
{

    StackLayout _stackLayout;

    List<RootObject> field = new List<RootObject>();
    public MainPage()
    {
        InitializeComponent();

        _stackLayout = new StackLayout();


        field.Add(new RootObject() { bindValue = "", title = "sex", code ="sex", property = new Property() { option = new List<string>() { "male","female"} } });
        field.Add(new RootObject() { bindValue = "", title = "grade", code = "grade", property = new Property() { option = new List<string>() { "2", "3" } } });

        foreach (RootObject item in field)
        {
            StackLayout layout = new StackLayout();
            layout.Children.Add(new Label() { Text = item.title });
            var picker = new Picker { Title = item.title };

            //set the BindingContext here
            picker.BindingContext = item;

            foreach (string e in item.property.option)
            {
                picker.Items.Add(e);

                //bind the value here
                picker.SetBinding(Picker.SelectedItemProperty, "bindValue",mode:BindingMode.TwoWay);
            }
            layout.Children.Add(picker);

            picker.SelectedIndexChanged += Picker_SelectedIndexChanged;

            _stackLayout.Children.Add(layout);
        }

        Content = _stackLayout;
    }

    private void Picker_SelectedIndexChanged(object sender, EventArgs e)
    {
        //check the value change in field
        RootObject r1 = field[0];
        Console.WriteLine(r1.bindValue);

        RootObject r2 = field[1];
        Console.WriteLine(r2.bindValue);
    }
}


public class Property
{
    public List<string> option { get; set; }
}

public class RootObject
{
    public string bindValue { get; set; }
    public string title { get; set; }
    public string code { get; set; }
    public Property property { get; set; }
}

参考：data-binding

xamarin 表单选择器将所选值绑定到 NgModel，如 angular

xamarin forms picker binding selected value to NgModel like angular

forms

xamarin

ionic-framework

ngmodel