标签: two-way-binding

处理Angular 5组件中的模型更改(双向绑定)

我目前正在研究angular 5应用程序。我尝试在视图的输入中更改组件的成员变量,并在更改后在组件中使用该变量。

我的结构如下:

文件夹:我的测试

  • my-test.component.html
  • my-test.component.css
  • 我的test.component.ts

1)my-test.component.html:

<input [(ngModel)]="hello" />
Run Code Online (Sandbox Code Playgroud)

2)my-test.component.ts:

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnChanges {
  hello: string = "bonjour";

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    // I'd like to log the changes of my field 'hello', 
    // once it get's changed in the input on the ui...

       console.log(changes);
  }

}
Run Code Online (Sandbox Code Playgroud)

不幸的是,该解决方案不起作用。您知道如何在ui上更改组件的变量,然后在组件中使用它吗?

谢谢!!

javascript html5 angular-components angular two-way-binding

6
推荐指数
1
解决办法
6261
查看次数

ListBox TwoWay绑定到SelectedItem

我已经多次看到这个问题并且一遍又一遍地查看我的代码.但是,当我SelectedItem使用对象分配我的绑定属性时,它不会更新显示的选定项.看来ListBox我认为我指定的对象不是其项目的成员.

public class MainViewModel : ViewModelBase
{
    //...
    public SortedObservableCollection<TubeViewModel> Items { get; private set; }
    public TubeViewModel SelectedTube { //get, set, propertychanged, etc. }
}

<ListBox x:Name="TubeList"
         Margin="10"
         ItemsSource="{Binding Items}"
         ItemTemplate="{StaticResource TubeTemplate}"
         SelectedItem="{Binding SelectedTube, Mode=TwoWay}" 
         SelectionMode="Single"
         VirtualizingStackPanel.IsVirtualizing="False">
</ListBox>
Run Code Online (Sandbox Code Playgroud)

这是我尝试设置的其中一个地方的impl SelectedTube- 肯定发生在主线程上.

 var match =
    from t in Items
    where t.Model.DataFileName == filename
    select t;
 if (match.Any())
    SelectedTube = match.First();
Run Code Online (Sandbox Code Playgroud)

我注意到,SelectedTube除非我手动点击它,否则从未突出显示,但有点忽略它.但后来我想ScrollIntoViewCentered所选项目,所以我DependencyProperty在我的视图中添加了一个观察SelectedItem更改.处理程序最初看起来像这样:

private void OnSelectedItemChanged(DependencyObject target, DependencyPropertyChangedEventArgs e) …
Run Code Online (Sandbox Code Playgroud)

data-binding wpf listbox selecteditem two-way-binding

5
推荐指数
1
解决办法
3539
查看次数

在分层数据结构中向MVVM添加编辑

这个问题是这个旧问题的后续问题,它更像是一个确认而不是一个开放的问题.

我的ViewModel实例有一个Model的私有实例_modelInst.
ViewModel在编辑期间可以独占访问Model的数据(因此Model不需要实现INotifyPropertyChanged).

现在我有三种方法可以从视图中编辑模型数据:

  1. 直接在Model实例上获取/设置,
    例如,对于简单的值字段,
    return _modelInst.fieldname;
    _modelInst.fieldname = value;
    这个很容易实现...

  2. 创建一个ViewModel实例并对父数据结构
    进行操作,例如对于更复杂的对象类型,如结构:

    • 为该类型创建新的ViewModel.
      ViewModel知道父级及其fieldname.
    • 在ContentControl + DataTemplate中显示它
    • 获取/设置:
      通过使用fieldname作为参数的父方法,
      即使只更改了一个字段,也会覆盖整个原始对象

    这意味着_modelInst为每个结构创建一个由父级实现的新接口(使用更新例程).

  3. 创建ViewModel实例,而不直接了解父类的数据结构,
    例如父类中的(列表)类

    • 为每个类创建一个新的ViewModel

    • 通过以下方式向父级发送更新说明

      1. 命令
      2. 消息
      3. 反射(父
        通过比较实例与所有存储的子代,知道哪个子函数调用了函数)

      所有这些都是一个很大的混乱实现,为可编辑的模型的每个领域创建功能.
      这几乎意味着模型的所有领域..​​....

(4.)可以创建一个通用的ViewModel,它只通过反射工作,其中每个子对象都知道它的父对象和它的字段名(+ index,如果在列表中).
只有root的逻辑才会干扰模型.
但是,该解决方案还需要一种方法来存储其中的字段的路径_modelInst.

有没有其他(更简单)的方法来实现这一目标?
我是否(再次)误解了MVVM的原理?
MVVM是否适合处理大型分层数据结构?

c# data-binding mvvm hierarchical-data two-way-binding

5
推荐指数
1
解决办法
1242
查看次数

与转换器的双向数据绑定不会更新源

我有一个数据绑定设置与转换器,以将一个笨拙的XML源转换为显示和编辑方便的内部类树.一切都非常适合从XML源读取,但我有一段时间试图对内部类进行更改以传播回XML源.

这是使用网站的XAML:

        <local:SampleConverter x:Key="SampleConverter" />
        <Expander Header="Sample" >
            <local:SampleControl 
                Sample="{Binding Path=XmlSource, 
                                 Converter={StaticResource SampleConverter}, 
                                 Mode=TwoWay}" />
        </Expander>
Run Code Online (Sandbox Code Playgroud)

XmlSource是父数据绑定对象的CLR读写属性(不是DependencyProperty).它是从XSD生成的.NET类型.

SampleConverter实现IValueConverter.Convert调用该方法并返回非空数据,但从ConvertBack不调用该方法.

SampleControl是一个UserControl,它封装了与Sample数据树的UI交互.这是XAML看起来像这样:

<UserControl x:Class="SampleControl">
    [... other stuff ...]

    <UserControl.Content>
        <Binding Path="Sample" RelativeSource="{RelativeSource Mode=Self}" Mode="TwoWay" TargetNullValue="{StaticResource EmptySampleText}" />
    </UserControl.Content>

    <UserControl.ContentTemplateSelector>
        <local:BoxedItemTemplateSelector />
    </UserControl.ContentTemplateSelector>
</UserControl>
Run Code Online (Sandbox Code Playgroud)

Sample属性是SampleControl代码中的DependencyProperty:

public static readonly DependencyProperty SampleProperty =
    DependencyProperty.Register("Sample", typeof(SampleType), typeof(SampleControl), new PropertyMetadata(new PropertyChangedCallback(OnSampleChanged)));

public SampleType Sample
{
    get { return (SampleType)GetValue(SampleProperty); }
    set { SetValue(SampleProperty, value); }
}

private static void OnSampleChanged(DependencyObject d, DependencyPropertyChangedEventArgs …
Run Code Online (Sandbox Code Playgroud)

c# data-binding wpf xaml two-way-binding

5
推荐指数
1
解决办法
4649
查看次数

msg:在数据绑定中找不到值为java.lang.String的属性'android:text'的getter?

我试图在edittext中使用数据绑定,在早上它工作正常,但突然得到错误:

****/ data binding error ****msg:Cannot find the getter for attribute 'android:text' with value type java.lang.String on android.widget.EditText. file:/home/itstym/ApkProjects/Reminder/app/src/main/res/layout/activity_main.xml loc:20:4 - 34:40 ****\ data binding error ****
Run Code Online (Sandbox Code Playgroud)

EditText在第20行:4-34:40

 <EditText
        app:error="@{login.errorEmail}"
        android:text="@={login.userEmailAddress}"
        android:hint="Email Address"
        android:id="@+id/email_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:ems="10"
        android:inputType="textPersonName"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="24dp"/>
Run Code Online (Sandbox Code Playgroud)

查看持有人:

 @Bindable
var userEmailAddress:String = String()
    set(userEmailAddress){
        field=userEmailAddress
        notifyPropertyChanged(R.id.email_address)
        /*to check Email for validation on every character inserted by user*/
        notifyPropertyChanged(BR.errorEmail)
    }
    get() {
    return field
}
Run Code Online (Sandbox Code Playgroud)

什么突然错了?

尝试解决方案:1.使缓存无效并重新启动.2.清理项目和重建项目.

android 2-way-object-databinding kotlin android-databinding two-way-binding

5
推荐指数
1
解决办法
2393
查看次数

Angular Textarea MatInput:如何设置最大长度/最大行数+最大行数

以下html代码段:

<mat-form-field class='textarea'>
    <textarea #txtarea matInput (change)='txtAreaChange()' [placeholder]="label" [(ngModel)]='text'></textarea>
    <mat-hint [class.red]="txtarea.value.split('\n').length > textAreaLimit[1]" align="start"> {{txtarea.value ? txtarea.value.split('\n').length : 0}}/{{textAreaLimit[1]}} lines</mat-hint>
    <mat-hint [class.red]="txtarea.value && txtarea.value.split('\n').map( len).max() > textAreaLimit[0]" align="end">Longest line: {{txtarea.value ? txtarea.value.split('\n').map( len).max() : 0}}/{{textAreaLimit[0]}}</mat-hint>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

定义具有双向绑定的文本区域输入。它会检查大小:总行数和最大行长。如果这些大于指定的某些限制,textAreaLimit则提示变为红色。

我想对其进行更改,以使用户无法打破此约束,例如,如果最大行数为3,并且有3行,则用户无法添加新行。在不破坏双向绑定的情况下如何做到这一点?

angular-material angular two-way-binding

5
推荐指数
2
解决办法
3893
查看次数

双向数据绑定如何导致无限循环?

我正在通过阅读官方文档来学习数据绑定。除了双向绑定中可能存在的无限循环之外,一切都是有意义的。根据双向绑定的官方文档:

使用双向数据绑定时请注意不要引入无限循环。当用户更改属性时,将调用使用 @InverseBindingAdapter 注释的方法,并将值分配给支持属性。反过来,这将调用使用@BindingAdapter注释的方法,这将触发对使用@InverseBindingAdapter注释的方法的另一个调用,依此类推。

我理解声明的第一部分,@InverseBindingAdapter如果属性发生更改并且新值分配给支持属性,则将调用注释方法。

但我不明白的是,为什么 在这个过程中@InverseBindingAdapter调用method时又@BindingAdapter调用method,以及如何导致无限循环?

android android-databinding two-way-binding

5
推荐指数
1
解决办法
1416
查看次数

如何在 Blazor 中以两种方式绑定级联值?

我正在玩 Blazor 中的自定义模板,我试图找到一种方法来双向绑定 aCascadingValue或实现类似的东西。现在我有以下模板。

@if (PopupVisible)
{
    <DxPopup>
        <HeaderTemplate>
            <h4 class="modal-title">@HeaderText</h4>
            <button type="button" class="close" @onclick="@UpdatePopupVisible">&times;</button>
        </HeaderTemplate>
        <ChildContent>
            <div class="modal-body">
                <div class="container-fluid">
                  @bodyContent
                </div>
            </div>
            <div class="modal-footer">
                @footerContent
                <button class="btn btn-secondary" @onclick="UpdatePopupVisible">Cancel</button>
            </div>
        </ChildContent>
    </DxPopup>
}

@code {
    [CascadingParameter] public bool PopupVisible { get; set; }
    [CascadingParameter] public EventCallback<bool> PopupVisibleChanged { get; set; }

    [Parameter] public RenderFragment HeaderText { get; set; }
    [Parameter] public RenderFragment footerContent { get; set; }
    [Parameter] public RenderFragment bodyContent { get; set; }

    private …
Run Code Online (Sandbox Code Playgroud)

.net c# two-way-binding blazor blazor-server-side

5
推荐指数
1
解决办法
2579
查看次数

如何将 SWIFTUI 按钮操作绑定到视图模型操作或方法

我正在尝试绑定 swiftui 按钮操作并收到类似错误Cannot convert value of type 'Binding<() -> ()>' to expected argument type '() -> Void'

在视野中

Button(action : $viewModel.action ) {
                        Text("Login")
                    }
Run Code Online (Sandbox Code Playgroud)

在视图模型中

class LoginViewModel: ObservableObject {
    
    @Published var userid = ""
    @Published var password = ""
    @Published var selection : Int? = 0
    //@Published var action : () -> void = {}
    func action()  {
        
    }
    
}
Run Code Online (Sandbox Code Playgroud)

ios two-way-binding swiftui

5
推荐指数
1
解决办法
4108
查看次数

将控件绑定到WPF中的集合/数组中的单个值

在WPF我有一个bool的集合?我希望以编程方式将这些值中的每一个绑定到一个单独的复选框.我希望绑定是TwoWay,以便在代码中更改集合中单个项的值更新复选框,反之亦然.

我花了很长时间试图弄清楚如何做到这一点,我完全卡住了.使用以下代码,复选框仅在窗口加载时获得正确的值,就是这样.更改复选框甚至不更新集合中的值.(更新:这似乎是.NET4中的一个错误,因为该集合在相同的.NET3.5项目中得到更新.更新:Microsoft已经确认了该错误,并且它将在.NET4版本中得到修复.)

非常感谢您的帮助!

C#:

namespace MyNamespace
{
    public partial class MyWindow : Window, INotifyPropertyChanged
    {
        public MyWindow()
        {
            InitializeComponent();
            DataContext = this;
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged(string propertyName)
        {
            if (PropertyChanged != null)
            {
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }

        public List<bool?> myCollection = new List<bool?>
            { true, false, true, false, true, false };

        public List<bool?> MyCollection
        {
            get { return myCollection; }
            set { myCollection = value; }
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

XAML:

<CheckBox IsChecked="{Binding Path=MyCollection[0], Mode=TwoWay}">
Run Code Online (Sandbox Code Playgroud)

.net c# data-binding wpf two-way-binding

4
推荐指数
1
解决办法
4250
查看次数