小编Pez*_*ter的帖子

Angular:指令与管道

创建和使用指令与创建和使用管道有什么相关的参数.

这个问题源于的情景是货币输入和输出.

如果用户需要输入货币,为什么不创建/使用将输入解析为格式化货币字符串的指令?另一个选择是接收该字符串,并通过管道显示它,如下所示:

<input type="text" #val (keydown)="currencyVal=val.value" />
<h3>{{currencyVal | currency}}</h3>
Run Code Online (Sandbox Code Playgroud)

VS

// Where mask-money is a directive that filters the 
//input to a formatted currency string
<input type ="text" mask-money (keydown)="currencyVal=val.value" />
<h3>{{currencyVal}}</h3>
Run Code Online (Sandbox Code Playgroud)

另一方面,可以在由输入触发的控制器/组件中使用管道来过滤该值.

我可以问一些关于它的问题,但我基本上想知道:每个问题的论点是什么?

html javascript angular

15
推荐指数
1
解决办法
8493
查看次数

使用异步管道从observable读取对象字段

我想更好地了解何时在Angular中使用异步管道.

我喜欢通过简单地添加订阅数据的管道来使数据与视图异步显示的想法.

但是,我只是在网络请求或其他一些自定义observable上看到并正确应用了异步管道,它包含数据数组或单个字段(如可观察字符串).

例如:

让我们说我做了一个API调用,返回一大堆学生.

// This data is within a network response
$students = ...get...map... 
[
  {
    name: "Bob OConnel",
    id: 0,
    description: "young..."
  },
  {
    name: "Rick Luckard",
    id: 3,
    description: "young..."
  },
  {
    name: "James Wing",
    id: 2,
    description: "young..."
  }
]
Run Code Online (Sandbox Code Playgroud)

这可以显示在这样的模板中:

<tr *ngFor="let student of $students | async">
  <td>{{student.id}}</td>
  <td>{{student.name}}</td>
  <td>{{student.description}}</td>
</tr>
Run Code Online (Sandbox Code Playgroud)

但是,鉴于ole REST API的理念.我还没有做过只返回数据数组的生产API调用.总是存在与数据数组相同级别的字段.但是他们出于某种原因,我不想简单地将这些额外的字段丢弃在Mapping中.

因此,不是$ students是一个数组,它将成为:

// This data is within a network response
$students = ...get...map... 
{
  id: "69asdkasdkljasd6969"
  href: "someURLrepresentingTheDatasOrigins"
  length: 3 …
Run Code Online (Sandbox Code Playgroud)

asynchronous http rxjs typescript angular

8
推荐指数
1
解决办法
2115
查看次数

Ionic 2占位符文本样式

我正在使用Ionic 2 rc0开发一个应用程序,并且在整个应用程序中有几个仍需要样式的输入字段.

<ion-item class="su-p3-item">
  <ion-label floating class="su-input">Your name</ion-label>
  <ion-input type="text" class="su-input"></ion-input>
</ion-item>
Run Code Online (Sandbox Code Playgroud)

离子2输入api http://ionicframework.com/docs/v2/api/components/input/Input/

具体来说,我需要更改占位符文本的样式,以及活动时的底部边框.通过API,并提供了SASS变量覆盖,我无法弄清楚如何覆盖输入字段的边框和占位符文本的继承样式.

除了影响每个输入所在的特定页面的这些更改之外,我还想避免使用'!important'(我不希望更改为'global').

html css ionic-framework ionic2 angular

5
推荐指数
4
解决办法
3万
查看次数

Ionic 2:离子内容不会在键盘上向上滚动

我正在创建一个 Ionic 2 移动应用程序,但在输入字段和键盘方面遇到了一些问题。现在,我只指 iOS。这是没有激活任何输入的页面。

在此处输入图片说明

现在,如果我点击 CVV 或邮政编码输入字段,键盘不会向上推离子含量,因此 cvv 或邮政编码字段位于键盘上方。

在此处输入图片说明

如果我点击邮政编码字段,整个输入都被键盘覆盖。没有滚动发生。在此问题之前,当键盘打开时,内容会在键盘上方挤压,但如果内容太大而无法容纳内容,则内容会挤压而不是推离屏幕。

有人对如何做到这一点有建议吗?我认为它不需要任何插件来控制内容或键盘。这似乎与百分比样式有关。

html sass ionic-framework ionic2 angular

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

离子2刷新在页面加载时切换离子复习

概述:

当我的页面加载到Ionic 2应用程序时,我发出网络请求来填充列表.此刻,当页面最初加载时,我正在切换离子旋转器.这是当前的复习:

<ion-refresher (ionRefresh)="doRefresh($event)">

  <ion-refresher-content
    pullingText="Pull to refresh..."
    refreshingSpinner="circles">
  </ion-refresher-content>

</ion-refresher>

<ion-spinner *ngIf="loading" color="light" name="circles"></ion-spinner>
Run Code Online (Sandbox Code Playgroud)

我希望的行为是移除离子旋转器组件,并在页面最初加载时启用离子刷新器.我已经在Ionic V1中看到了几个这样的例子,但我似乎无法将它转换为Angular 2.

题:

有没有办法从我的控制器(*.ts)触发离子修复器和它的微调器,所以我可以从我的模板中删除额外的离子微调器组件?

html javascript ionic2 angular

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

异步管道可观察的覆盖刷新DOM

我使用异步管道订阅DOM中的Observable,如下所示:

<div *ngIf="item$ | async as item; else loading">
    ....
    <div>{{item.name}}</div>
</div>
Run Code Online (Sandbox Code Playgroud)

一切正常。

但是,我有一个刷新方法可供用户调用,它将使网络再次发出请求,并再次返回item $。

因此,在我的ts控制器中:

this.item$ = this._itemService.getItem(url);
Run Code Online (Sandbox Code Playgroud)

该项目已在服务中映射。

但是,我再次设置item $。因此,在加载时,DOM中的项目会消失,因为它不再存在,然后在检索到新的$ item后会再次出现。

如何在不使项目在DOM中消失的情况下“刷新” $ item

javascript observable rxjs angular

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

使用angularjs过滤器拆分带空间的驼峰案例字符串

我想将camel case字符串拆分为常规表单,并希望使用自定义过滤器.

<select class="form-control" ng-model="emailsettingType" ng-change="emailsettingTypeChange()" name="emailsettingType" ng-required="true">
<option ng-repeat="opt in emailtypesforuser">{{opt|splitCamelCase}}</option>
</select>
Run Code Online (Sandbox Code Playgroud)

filter angularjs angularjs-filter

3
推荐指数
2
解决办法
2212
查看次数