小编MWi*_*ead的帖子

我正在制作一个Angular 2网络应用程序.我有一个由几个关键属性组成的模型,然后是基于这些关键值计算的其他几个属性.

我的所有属性都有getter方法.为了使我的计算属性与我的键属性保持同步,通过setter方法更改键属性,这些方法重新计算所有计算属性.这是一个简化的例子:

export class Model{
    private _keyValue: number;
    private _computedValue: number;

    getKeyValue(): number{
        return this._keyValue;
    }

    setKeyValue(value: number){
        this._keyValue = value;
        this.evaluateComputedValues(); // This might be time-consuming
    }

    getComputedValue(): number{
        return this._computedValue;
    }
}

这使我的模型保持一致:每次更改其中一个关键属性时,都会重新计算所有计算属性.

现在我需要弄清楚如何将我的属性绑定到组件视图.看起来我可以使用插值来呈现计算属性的getters:

<div>{{model.getComputedValue()}}</div>

但是,我不确定将我的键属性绑定到输入字段的最佳方法是什么.使用双向绑定的所有示例似乎都使用这样的ngModel:

<input [(ngModel)]='model.property'>

但是,这似乎是为了绑定到简单的属性.理想情况下,我需要使用单独的getter和setter方法(getKeyValue和setKeyValue)进行双向绑定.

在Angular 2中有没有内置的方法来实现这一点？

我正在尝试使用Entity Framework,WebAPI,OData和Angular客户端组合一个简单的玩具项目.一切都运行正常,除了我放在我的一个模型上的导航属性似乎没有工作.当我使用$ expand调用我的API时,返回的实体没有它们的导航属性.

我的课程是狗和老板,看起来像这样:

    public class Dog
{
    // Properties
    [Key]
    public Guid Id { get; set; }
    public String Name { get; set; }
    [Required]
    public DogBreed Breed { get; set; }
    public int Age { get; set; }
    public int Weight { get; set; }


    // Foreign Keys
    [ForeignKey("Owner")]
    public Guid OwnerId { get; set; }

    // Navigation
    public virtual Owner Owner { get; set; }
}

    public class Owner
{
    // Properties
    public Guid Id { get; …

我在Kendo网格中有一个列,我想在渲染时执行一些特定的逻辑,并使用Angular.我使用k-columns指令设置了网格列.

看完文档后,看起来很简单:我可以将模板选项添加到我的列,定义执行逻辑的函数,并传递dataItem值.我看起来像这样:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

但是,运行它会导致语法错误,抱怨在我的函数中形成块的开头的字符"{".

我已经看到了几种以这种格式定义模板函数的例子.还有什么需要做才能实现吗？我做错了什么吗？是否有另一种方法将模板定义为函数并将列数据传递给它？(我尝试在我的$ scope上创建一个函数,但是我无法弄清楚如何将数据传递给函数.)

谢谢您的帮助.

在我们的应用程序中,我们希望日期列上的过滤器提示用户输入开始日期和结束日期,过滤器返回有关字段位于这两个日期之间(或之上)的行.

初步方法

我们最初的方法是限制日期类型以使用gte和lte运算符,并在列上添加"extra:true"可过滤选项.这很接近,但是出现了以下问题:A)每个日期输入可以使用gte(Start)或lte(End)运算符,提供不期望的灵活性以及用户创建永远不会返回结果的过滤器的选项,以及B)提出我们不想要的逻辑比较(和/或).

更好的方法

这个问题得到了Matthew Erwin的回答,它让我们非常接近:它允许我们完全重新设置过滤器的样式,因此我们可以简单地提供一个开始日期输入和一个结束日期输入.但是,我无法正常工作的是将正确的过滤操作与正确的输入相关联(开始日期为gte,结束日期为lte).我的自定义过滤器如下:

    $scope.dateFilter = {
    extra: true,
    operators: {},
    ui: function (element) {
        var parent = element.parent();
        while (parent.children().length > 1)
            $(parent.children()[0]).remove();

        parent.prepend(
            "Start Date:<br/><span class=\"k-widget k-datepicker k-header\">" +
            "<span class=\"k-picker-wrap k-state-default\">" +
            "<input data-bind=\"value: filters[0].value\" class=\"k-input\" type=\"text\" data-role=\"datepicker\"" +
            " style=\"width: 100%\" role=\"textbox\" aria-haspopup=\"true\" aria-expanded=\"false\" aria-disabled=\"false\" " +
            " aria-readonly=\"false\" aria-label=\"Choose a date\">" +
            "<span unselectable=\"on\" class=\"k-select\" role=\"button\">" +
            "<span unselectable=\"on\" class=\"k-icon k-i-calendar\">select</span></span></span></span>" +

            "<br/>End Date:<br/>" +
            "<span class=\"k-widget k-datepicker k-header\"><span class=\"k-picker-wrap k-state-default\">" + …

我想创建一个视图只是一个canvas元素的组件.我希望这个组件:

• 用画布填充放置的任何元素
• 在初始化过程中确定其宽度和高度
• 知道何时调整大小,确定其新的高度和宽度,并做出适当的响应.

我想我可以通过将组件模板中画布的宽度和高度指定为100%来实现第一部分,如下所示:

@Component({
selector: 'canvas-component',
template:'<canvas style="width:100%; height:100%"></canvas>'
})

但我不知道如何进行第二或第三部分.

最终目标是能够在画布中绘制占据画布相同大小的形状,无论其大小如何.举个例子,我想绘制一个直径为画布宽度3/4的圆圈 - 所以如果画布增大或缩小,圆圈也应该重新绘制,增长或缩小.

我不知道这是否重要,但我正在使用Typescript制作网络应用程序.

有谁知道实现这个目标的好方法？我正在寻找最可能的"Angular方式",因为这是我用来学习Angular 2的个人项目.

提前致谢!

我正在自学更多关于如何创建节点模块以及如何使用打字稿的知识。为了实现这一点，我尝试在本地创建自己的节点模块，并在项目中引用它 - 但是，打字稿似乎无法识别我的模块。

我创建的节点模块是一个用于进行矩阵/向量运算的简单库，因为我会玩弄这些东西。我在项目的 node_modules 目录中创建了一个文件夹，其中包含以下文件：

node_modules
  XVectorMath
    package.json
    vectorMath.js
    vectorMath.d.ts

这是编译这些文件的单独打字稿项目的输出。这些是相关文件的内容：

XVectorMath/package.json

{
"name": "XVectorMath",
"version": "0.1.0",
"main": "vectorMath.js",
"types": "vectorMath.d.ts"
}

XVectorMath/vectorMath.d.ts

export declare class Vector3 {
    constructor(x?: number, y?: number, z?: number);
    x: number;
    y: number;
    z: number;
    angle(): number;
    magnitude(): number;
    addVector3(b: Vector3): Vector3;
    subtractVector(b: Vector3): Vector3;
    divide(a: number): Vector3;
    scale(a: number): Vector3;
    normalize(): Vector3;
    dotProduct(b: Vector3): number;
}
export declare class Matrix3 {
    constructor(m?: any);
    value: number[][];
    getRowVector(n: number): Vector3;
    getColumnVector(n: number): Vector3;
    multiplyMatrix3(m: Matrix3): …