标签: angular

我正在使用ChangeDetectorRef在Web请求后更新视图.

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { QRCodeModule } from 'angularx-qrcode';

@Component({
  selector: 'app-print',
  templateUrl: './print.component.html',
  styleUrls: ['./print.component.css'],
})
export class PrintComponent implements OnInit {
  barcodeitems;
  selecteditems = [];

  constructor(public http: HttpClient, private cdr: ChangeDetectorRef){

  }

  ngOnInit(): void {

  }

  getqr() {
    console.log("selecteditems array", this.selecteditems);
    let filterQuery = this.selecteditems.map(i => `ID eq '${i}'`).join(" or ");
    let url = `https://example.com/corporate/dev/_api/web/lists/getbytitle('Document Separator Barcodes')/items?$top=1000&$orderBy=ID&$filter=${filterQuery}`
    this.http.get(url).subscribe(data => {
      this.barcodeitems = data['value'];

      this.cdr.detectChanges();

    });
  } …

使用ngx-bootstrap,如何在手风琴组标题中添加图标？例如:

<accordion-group heading="<i class='fa fa-users'></i> Users"> This content is straight in the template. </accordion-group>

如何在Angular上传之前预览我选择的多个图像？

我已经设法做到但只有一张图片,即使我选择了几张,只有一张能识别我.我认为使用*ngFor是一个很好的选择,但我不知道如何提高它.有任何想法吗？

myComponent.html

<img *ngIf="url" [src]="url" class="rounded mb-3" width="180">
<input type="file" multiple (change)="detectFiles($event)">

myComponent.ts

detectFiles(event) {
this.selectedFiles = event.target.files;
if (event.target.files && event.target.files[0]) {
  var reader = new FileReader();
  reader.onload = (event: any) => {
    this.url = event.target.result;
  }
  reader.readAsDataURL(event.target.files[0]);
}
}

我尝试了以下尝试单击选择下拉列表中的选项,但没有任何工作.

selectEl = fixture.debugElement.query(By.css('#dropdown'));
selectEl.nativeElement.options[3].nativeElement.dispatchEvent(new Event('click'));
selectEl.queryAll(By.css('option'))[3].nativeElement.click();
selectEl.nativeElement.options[3].nativeElement.click();

在每次运行fixture.detectChanges();后运行更改检测但是当我去检查元素值时它没有改变. expect(selectEl.nativeElement.options[selectEl.nativeElement.selectedIndex].textContent).toBe('name2');

我错过了一些简单的工作吗？

我正在编写一个Angular 4应用程序HttpClient,用于显示电影放映时间.数据所在的有2个JSON文件:showtimes.json和movies.json.

// showtimes.json    
[{
"id": "2030c64ce72b4e4605cb01f2ba405b7d",
"name": "Arclight", // need to display this information
"showtimes": {
  "b4c2c326a4d335da654d4fd944bf88d0": [ // need to use this id
      "11:30 pm", "2:45 pm", "8:35 pm", "4:15 pm", "10:30 pm"
  ]
 } 
}]

// movies.json
[{
"b4c2c326a4d335da654d4fd944bf88d0": { // to retrieve the title, rating, and poster
  "title": "Fifty Shades Darker", // needs to be displayed
  "rating": "R", // needs to be displayed
  "poster": "https://dl.dropboxusercontent.com/s/dt6wgt92cu9wqcr/fifty_shades_darker.jpg" // needs to be displayed …

我的离子构建工作完美,直到我想在我的iPhone上测试,所以我停止了我的服务器,然后做了一个ionic serve --address localhost,我注意到我的样式表不再加载...所以我杀了服务器再次回到ionic serve和错误坚持..

(index):1拒绝从' http:// localhost:8100/build/main.css ' 应用样式,因为它的MIME类型('text/html')不是受支持的样式表MIME类型,并且启用了严格的MIME检查.

我已经尝试清除缓存localhost:8100并重建项目,但错误仍然存​​在......

有任何想法吗？我几乎被困住直到这个问题得到解决:(

编辑:我最终修复它的方式可能不是最好的..但至少它再次起作用.我刚进入我的github存储库,我的应用程序已下载main.css并粘贴到build文件夹中,因此我没有遇到任何问题.

版本:(角度5）

我是Angular的新手，但我一直呆在那里。我知道如何通过将[parentData] =“ var”注入子选择器<>来简单地在父子组件之间共享数据。

但是当使用路由时；我只有路由器出口，不能将[parentData]绑定到它，因为它会引发错误。

从子路径访问父属性的最佳和最简便方法是什么？

该项目在这里被闪电击中。

我需要在子组件内部显示产品（来自父组件）。

我试图从API获取用户列表,但我收到以下错误:

TypeError: Cannot read property 'toLowerCase' of undefined
at HttpXsrfInterceptor.intercept (http.js:2482)
at HttpInterceptorHandler.handle (http.js:1796)
at HttpInterceptingHandler.handle (http.js:2547)
at MergeMapSubscriber.eval [as project] (http.js:1466)
at MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
at ScalarObservable._subscribe (ScalarObservable.js:51)
at ScalarObservable.Observable._trySubscribe (Observable.js:172)
at ScalarObservable.Observable.subscribe (Observable.js:160)

我有一个调用homeService.getUsers()的登录组件,它使用HttpClient来检索用户,但http请求永远不会到达服务器.

login.component.ts:

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

import { HomeService } from '../service/home.service';
import { User } from '../domain/user';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  user: User = {
      id: …

我的应用程序属于Angular 5.2.6

事情是正常的 ng serve

但是在运行时:ng build --prod在失败之前需要一段时间

这些错误似乎与clean-css操作有关:

错误跟踪:

 92% chunk asset optimization/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37
  if (originalPosition.line === null && line > 1 && selectorFallbacks > 0) {
                      ^

TypeError: Cannot read property 'line' of undefined
    at originalPositionFor (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/input-source-map-tracker.js:37:23)
    at originalMetadata (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:486:43)
    at intoTokens (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:240:75)
    at tokenize (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/tokenizer/tokenize.js:74:10)
    at fromStyles (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:147:12)
    at fromString (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:48:10)
    at doReadSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:33:12)
    at readSources (/home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/reader/read-sources.js:24:10)
    at /home/khalidvm/Desktop/Workspace/Front/frontend_v2/node_modules/clean-css/lib/clean.js:99:12
    at _combinedTickCallback (internal/process/next_tick.js:95:7)
    at process._tickCallback (internal/process/next_tick.js:161:9)

它似乎在清洁CSS时失败了.

这是我的package.json:

{
  "name": "test",
  "version": …

所以我通过构建以下沙箱来试验ngrx&ngrx/effects:

https://stackblitz.com/edit/ngrx-vanilla

快速介绍:

• 它在app/store中有一个根存储
• 它在app/features中延迟加载了两个模块
• 它在app/commons中有单例服务

三页:

• 行动项目:路由到此页面会触发随机生成三个愚蠢的公司行动项目
• 用户:具有路由器支持的基本主> detail redux实现
• 会议:提出问题的地方,点击"开始会议",见证相关的意见交流.

问题和背景:

• 我理解redux中的所有数据更新都是通过操作实现的
• "效果"库用于处理异步事件,以便根据第三方事件和异步调用发送新操作.
• app/common/meeting/service模仿例如websocket或firebase实时数据库推送更新的行为.

收到更新后(在app/store/effects/meeting.effects.ts中说明),将调度新操作.

最后,问题是:让一个共同的服务了解商店是一种干净的做法吗？将一个监听器注册到websocket/firebase实时数据库以便在推送数据时调度操作的最佳位置在哪里？

在这里,我做了一个效果(meeting.effects)对meetingActions.START_MEETING操作类型做出反应,每当推送数据时,都会向商店发送更新订单,但由于我提出的一系列原因,这感觉不对:

• 难以单独进行单元测试(需要比自身更多的上下文)
• 在"停止会议"操作的情况下,此方法需要存储订阅(或？)以停止订阅.在我的方法中,无法控制在荒野中创造的可观察物.

这些案件通常如何处理？