小编San*_*nde的帖子

我遇到的问题如下:我需要的行为是,当从自动完成输入中选择一个选项时,它应该向Angular Material Chips组件添加一个芯片(它会这样做),它还应该清除自动完成输入,那么我可以选择其他选项.

这是我的HTML:

<div class="col-md-6">
  <md-form-field>
    <input type="text" placeholder="Categoría" aria-label="Categoría" mdInput [mdAutocomplete]="auto" [formControl]="categoryCtrl">
    <md-autocomplete #auto="mdAutocomplete" (optionSelected)="selectCategory($event)">
      <md-option *ngFor="let category of filteredCategories | async" [value]="category.name">
        {{ category.name }}
      </md-option>
    </md-autocomplete>
  </md-form-field>
</div>

这是我的TypeScript代码:

constructor(private placeService: PlaceService, private categoryService: CategoryService) {
    this.categoryCtrl = new FormControl();
    this.filteredCategories = this.categoryCtrl.valueChanges
        .startWith('')
        .map(category => category ? this.filterCategories(category) : this.categories.slice());
}

filterCategories(name: string) {
    return this.categories.filter(category => category.name.toLowerCase().indexOf(name.toLowerCase()) === 0);
}

selectCategory(category: any) {
    const index = this.selectedCategories.indexOf(category.option.value);
    if (index === -1) {
        this.selectedCategories.push(category.option.value)
    } …

我在iOS上建立离子应用程式时遇到问题。如果运行release build命令，则归档成功，但导出失败，并显示以下错误：

错误：exportArchive：“ TeaZe.app”需要具有“推送通知”功能的配置文件。

Error Domain = IDEProvisioningErrorDomain代码= 9““ TeaZe.app”需要具有推送通知功能的配置文件。” UserInfo = {NSLocalizedDescription =“ TeaZe.app”需要具有推送通知功能的配置文件。NSLocalizedRecoverySuggestion =添加配置文件导出选项属性列表中的“ provisioningProfiles”字典。}

**出口失败**

供应配置文件肯定具有推送通知服务：

该功能已在xcode中启用：

我仍然可以在xcode中构建和存档应用程序而没有任何错误，但是我发现推送通知不再起作用！

我的构建环境：

Ionic CLI 3.20.0
ionic1 1.3.3
ios 4.5.3
XCode 9.3

似乎为cordova配置了一些文件，但我不知道该怎么办。我删除了所有证书/配置文件，并重新创建了xcode和cordova-ios，将其更新为最新版本。还尝试降级xcode，但与我的iPhone不兼容，因此不值得。

有人遇到过这个吗？

我已经开始使用 Workbox3 开发 PWA。到目前为止，它的效果非常惊人。我已将代码添加到“添加到主屏幕”按钮，以便用户可以将其添加到移动设备的主屏幕。但是在主屏幕上添加图标的提示框只显示一次。一旦我将该图标添加到主屏幕，然后如果我删除它并再次尝试相同，则它什么也不显示。

我正在从 Chrome 的 DevTool->Application->Mainfest sectoin->Add to Home Screen检查Desktop chrome。我的Service Worker安装正确并且工作正常。

它没有显示任何错误，没有任何控制台。所以我无法跟踪问题是什么。

这是我迄今为止为添加到主屏幕所做的代码。我在页脚添加了这个按钮。

<button name="addToHome" id="addToHome" class="addToHome">Add To Homescreen</button> 

var deferredPrompt;
var btnSave = document.querySelectorAll('.addToHome')[0];

    window.addEventListener('beforeinstallprompt', function(e) {
      console.log('beforeinstallprompt Event fired');
      //e.preventDefault();   //I even try with this uncommented no luck so far

      // Stash the event so it can be triggered later.
      deferredPrompt = e;

      return false;
    });

    btnSave.addEventListener('click', function() {
      if(deferredPrompt !== undefined) {
        // The …

使用OnPush变更检测来使变更灵活且在测试中也非常简单的最佳方法是什么？通过各种教程，我发现可以使用OnPush：

1. 首先是在视图中直接使用服务中的可观察对象，我不确定该方法是否有效。https://blog.angular-university.io/onpush-change-detection-how-it-works/。
2. 另一种选择是使用 immutable.js 但在这种情况下，我不知道创建对象是否非常灵活，我知道在列表的情况下更容易。

也许你知道不同的方法然后我列出的这个？

mat-slide-toggle我的角度页面上有一个。我在模块中导入了适当的值，但是一旦页面加载，切换按钮就会显示为正常的复选框。

HTML：

<div style="width:100%;overflow:hidden">
<h5 class="mx-2 mb-0" style="width:50%;float:left;clear:none">Suggested Titles</h5>
<mat-slide-toggle
  style = "float:right;width:30%"
  [color]="color"
  [checked]="checked"
  (change)="andOrBoxChecked()"
  [disabled]="disabled"> {{slideValue}}
</mat-slide-toggle>
</div>

打字稿：

import { Component, OnInit, NgModule } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...]
  color = 'accent';
  checked = true;
  disabled = false;
  slideValue = "And";
[...]
  andOrBoxChecked(){
    if(this.slideValue == 'And')
      this.slideValue = 'Or';

    else  
      this.slideValue='And';
  }

模块：

import { MatSlideToggleModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
[...] …

我在head的标签中有一些全局变量:

<script type="text/javascript">
    var apiRoot = 'http://localhost:8000/api',
        apiUrl = apiRoot,
        apiBadgeUrl = apiRoot + '/badges',
        apiLevelUrl = apiRoot + '/levels',
        apiBehaviorUrl = apiRoot + '/behaviors',
        apiTrophyUrl = apiRoot + '/trophies',
        apiUserUrl = apiRoot + '/users',
        apiWidgetPreferencesUrl = apiRoot + '/widgetPreferences';
</script>

我想在html文件中使用角度表达式,但我的尝试失败:

{{ $window.apiRoot }} or {{ apiRoot }} 

我基于管道上的Angular.io教程创建了一个简单的有状态管道:

@Pipe({
    name: 'fetch',
    pure: false
})

class FetchJsonPipe  implements PipeTransform{
    private fetchedValue = 'waiting';
    private fetchedValue2 = 'waiting2';

    transform(value:string, args:string[]):any {
        setTimeout(() => {
            this.fetchedValue = 'done';
            this.fetchedValue2 = 'done2';
        }, 3000);
        return this.fetchedValue2;
    }
}

@Component({ selector: 'sd-splash'
           , template: 'hello ng2 {{ "5" | fetch }}'
           , pipes: [FetchJsonPipe]
           })

我的问题是,我马上就回来this.fetchedValue了#transform.因为它只是一个字符串,所以它是按值返回的.稍后,当超时结束时,我只是将值赋给'done'属性(也是私有的).

Angular2如何知道初始结果,'waiting'不是最终结果？它是如何知道更新后的价值可以通过#fetchedValue？承诺根本没有暴露,Angular2没有关于我存储结果的字段名称的信息.

它唯一的线索是pure == false,我猜它指示它观察实例的变化.但我不知道它有关于哪个领域的信息 …

我正在尝试在学习Angular 2的同时设置一条简单的路线,每当我点击一个链接时,浏览器就会被路由到新的路线,但浏览器会重新请求所有资源(不像单页应用程序那样).

我的索引文件,

<!--... . .  various scripts and styles . . . . . --->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/router.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>

<script>
  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>
</head>
<body>
  <app></app>
</body>

应用来源,

main.ts

import {bootstrap}    from 'angular2/platform/browser';
import {RoutingApp} from './routing/routing.app'
import {ROUTER_PROVIDERS} from 'angular2/router'

bootstrap(RoutingApp, [ROUTER_PROVIDERS]);

RoutingApp

import {Component} from "angular2/core"
import {RouteComponent} from './route.component'
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';


@Component({
    selector : 'app', …

我在Angular 2中使用WebRTC.

在TypeScript 1.x中,我可以成功使用它.

const peerConnection = new RTCPeerConnection(configuration, null);

但在更新到TypeScript 2.x后,我的终端出现了这个错误:

错误TS2304:找不到名称'RTCPeerConnection'.

我已经做了npm install --save-dev @types/webrtc,我的IDE WebStorm已经将它RTCPeerConnection正确地键入了它.

键入RTCPeerConnection位于/my-project/node_modules/@types/webrtc/RTCPeerConnection.d.ts

我的tsconfig.json文件:

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "commonjs",
    "removeComments": true,
    "sourceMap": true,
    "lib": ["es6", "dom"]
  },
  "include": [
    "node_modules/@types/**/*.d.ts",
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types/**/*.d.ts"
  ],
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

我该怎么做才能正确？

这是我的模态代码:

    let modal = Modal.create(DailyReportPage);
    this.nav.present(modal);

它在手机上运行正常,但在平板电脑上它看起来像这样: 我想要的是让它看起来像这样: