小编Mat*_*man的帖子

如果我有一个对象数组,并循环遍历它们为每个对象分配一个属性值,WebStorm警告我:

分配给基元的值将丢失

但是,在控制台中进行测试时,我并没有"丢失"任何值.

这只发生在循环在函数内部时.

以下是此错误的示例:

let people = [
    {
        name: 'Foo',
        age: 21,
        surname: 'FooBar'
    },

    {
        name: 'Bar',
        age: 51,
        surname: 'FooBar'
    }
];

没有函数包装器:

people.forEach(function (person) {
    person.surname = 'Baz'; // No error. Works in console.
});

使用函数包装器:

function changeSurname(people) {
    people.forEach(function (person) {
        person.surname = 'Baz'; // Error warning me that value assigned to primitive will be lost.
    });
}

changeSurname(people);

这两个都在控制台中产生相同的输出(姓氏改为'baz').

我认为这与对象引用和person指向的内容有关,但我不确定究竟是什么.

为什么我看到这个错误？

WebStorm试图拯救我的潜在错误是什么？

使用md-colors角度材料,是否可以将背景设置为白色而无需定义自定义白色托盘？

我以为我可以使用灰色托盘,因为文档说:

背景 - 灰色(注意白色在此调色板中)

所以我尝试了

<div md-colors="{background: 'grey-50'}">

但grey-50仍然只是浅灰色,而不是白色.

我试过<div layout-padding md-colors="{background: 'white'}">但是白色托盘似乎不存在于角形材料中.我收到错误angular.js:13711 mdColors: couldn't find 'white' in the palettes.,因为没有白色托盘.

有没有办法从灰色托盘中获取白色？(色调,不透明度等)

如果没有,是否有任何方法可以使用角度材料从任何其他托盘访问白色？

如果一切都失败了,我可以定义一个完整的白色托盘/主题并使用它,但如果有正确的方法,我宁愿避免这样做.

在骨干中,我可以以不同的方式使用我的模型.

据我所知,(数据)模型用于存储数据(可能来自RESTful Web服务器),ViewModel用于存储有关特定视图的信息(例如隐藏/显示的视图状态).

我的大部分知识来自这个问题.

看完这其中,笔者说的文章:

在数据更改时呈现UI,而不是用户交互

和

流程是:用户交互 - >数据更改 - >视图渲染.

例如,如果我们在音频播放器中编写播放/暂停切换按钮,则流程将为:

• 用户点击"播放"
• 模型(数据)状态变为'播放'
• 视图以"播放"模式呈现

遵循此模式可确保从其他来源(例如快进,新播放列表,网络错误等)触发的状态更改将切换我们的按钮以执行正确的操作.换句话说,我们有一个单一的事实来源:每当我们的模型发生变化时,我们都知道应该渲染我们的按钮.

var PlayPauseButton = Backbone.View.extend({
  tagName: 'li',
  className: 'icon',
  initialize: function(){
    this.model.on('change:status', this.render, this);
  },
  render: function(){
    this.$el.removeClass('icon-play').removeClass('icon-pause');
    this.$el.addClass('icon-' + (this.isPlaying() ? 'pause' : 'play'));
  },
  events: {
    'click': function(){
      this.model.set('status', this.isPlaying() ? 'paused' : 'playing');
    }
  },
  isPlaying: function(){
    return this.model.get('status') === 'playing';
  }
});

我开始怀疑使用每一个的优点和缺点.

假设我们每个视图只有一个模型(我知道我们可以有更多,但是如果我们将它限制为一个).我能想到,

ViewModel专业人士:

• 文章中提到的那些.
  • 有关视图的信息将保存在模型中,从而防止视图混乱.
  • 状态信息可以在视图之间共享.

缺点:

• 无法调用Backbone的save()方法,因为这会导致模型将不正确的数据保存到服务器(例如视图状态).
• 无法轻松调用Backbone的fetch()方法,因为我们可能会践踏我们的视图数据.

(数据)模型专业人士:

• 使用骨干内置的保存,获取等.
• 视图可以共享数据,而不必担心存储在其中的视图特定数据.

缺点:

• 模型只能用于数据 …

给出以下示例：

/**
 * An outer function
 * @param {number} age - The age to pass to outerFunction
 * @returns {#What goes here?#}
 */
function outerFunction(age){
    return addTen(age)
}

/**
 * Adds 10 to the age
 * @param {number} age - The age to add 10 to
 * @returns {number} - The age + 10
 */
function addTen(age){
    return 10 + age
}

在outerFunction返回另一个函数的结果。

我想到了几种方法来记录这个：

• @returns {number}- 我们知道addTen返回一个数字，但如果这改变了怎么办？我们将不得不更新两者（或每次返回时，这可能很多），这是不可维护的。

• @returns {function}- 我不确定这是否在 JsDoc 中可用。我在任何地方都找不到。这也不觉得它提供了太多信息。

• @returns {any} …

在阅读了这个 SO question 后，我发现不可能嵌套，optgroups因为它不是 HTML5 规范的一部分。可以自己应用样式，但如果可以在有角度的材料中使用，我宁愿避免这种情况。

“在引擎盖下”角材料为 div 交换了许多元素并应用了自定义样式。这让我觉得他们可能会处理这种情况。

如果我有以下代码，我希望md-optgroupwithlabel="Second level deep"进一步缩进。

普朗克

<md-input-container>
    <md-select ng-model="vm.someModel">
        <md-optgroup label="One level deep">
            <md-option>
                One level deep
            </md-option>
        </md-optgroup>
        <md-optgroup label="Another group">
            <md-optgroup label="Second level deep">
                <md-option>Two levels deep</md-option>
            </md-optgroup>
        </md-optgroup>
    </md-select>
</md-input-container>

但是，md-optgroups并非所有内容都缩进并显示相同。

这是它目前的样子：

我在演示或文档中看不到任何关于此的内容（实际上他们根本没有任何文档md-optgroup），但文档有时可能已过时/不完整。

是否可以使用不同缩进的嵌套选项组？

如果没有，使用角材料中可用的材料来实现这一目标的最佳方法是什么？我应该使用flex等吗？

我正在努力实现这样的目标：

我知道的

当将 TypeScript 与 Angular 的 ui 状态一起使用时，我可以通过 UI-Router 明确类型库提供“类型断言”。

使用它，我可以注入$state并获得类似于以下内容的代码

function myCtrl($state: ng.ui.IStateService){
    // Some code
}

这为我提供了正确的自动完成/错误报告$state。

到目前为止，一切都很好。

问题

当我尝试访问params如下属性时

function myCtrl($state: ng.ui.IStateService){
    // Trying to access a property of $state.params
    var example = $state.params.example;
}

我收到一条错误消息：

IStateParamsService 上不存在属性“example”

因为 TypeScript 不知道这个属性，这是正确的。

我考虑尝试：

定义我自己的扩展接口ng.ui.IStateService

interface IMyState extends ng.ui.IStateService{
    params: {
        example: string;
    };
}

然后将类型设置为我的界面

function myCtrl($state: IMyState){
    var example = $state.params.example;
}

这样就消除了错误。

正确的使用类型是什么$state？

我应该像我的示例中那样定义自己的界面吗？

我有一个<select>带ng-model.我希望我的<option>s 的值是JSON对象.

当用户选择一个选项时,我想显示所选对象的各个属性.

我有以下的plunker显示我想要实现的目标.

<div ng-controller="myCtrl as vm">

    <div>
        Person: 
        <select ng-model="vm.person">
            <option value='{"name": "Matt", "age": "21"}'>Matt</option>
            <option value='{"name": "John", "age": "22"}'>John</option>
        </select>
    </div>


    <br>
    Person: <input type="text" ng-model="vm.person">
    Name: <input type="text" ng-model="vm.person.name">
    Age: <input type="text" ng-model="vm.person.age">

</div>

问题是它vm.person是一个字符串,而不是一个对象,所以我无法访问它的属性.

我已经尝试过fromJson但是它会抛出一个错误,因为它是不可分配的(这是明智的).

<input type="text" ng-model="angular.fromJson(vm.person.name)">

我可以注意改变vm.person,然后在angular.fromJson那里做,但这感觉不对.感觉有更好的方式.

我本质上想要在它到达模型之前解析字符串,这样当它到达模型时,它就是一个javascript对象.这将允许我访问该对象的属性.

在角度处理这个问题的正确方法是什么？

如果没有"有角度"的方式,在Javascript中处理这个问题的常用方法是什么？

编辑

一个分叉的plunker来显示添加a的效果$scope.$watch.

function myCtrl($scope){
    var vm = this;

    $scope.$watch('vm.person', function(){
        vm.person = angular.fromJson(vm.person); …

我使用Angular 5和Angular材料以及WebStorm版本2017.3.1

当我尝试使用<mat-toolbar>具有以下代码的元素时

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import {MatToolbarModule} from '@angular/material';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<mat-toolbar>
  <span>Title</span>
</mat-toolbar>

WebStorm给了我一个错误:

'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.

但是,这在浏览器中正确呈现:

因为它 …