标签: angular5

HttpClient我正在使用提供的最新组件Angular5来发出本地 json 的 get 请求，但从那以后我收到了 404 错误。我已经HttpClientModule在我的app.module.ts.

文件夹结构快照：

我正在从博客详细信息组件进行调用blog-list.json。这是我的代码：

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    // this.http.get('https://jsonplaceholder.typicode.com/posts/1').subscribe((data:Blog[]) => {
    this.http.get('app/api/blog-list.json').subscribe((data:Blog[]) => {
         this.blogs = data;
    });
  }

我收到以下错误：

GET http://localhost:909/app/api/blog-list.json 404 (Not Found)

即使我尝试通过点击http://localhost:909/src/app/api/blog-list.json直接在浏览器中打开文件，我也会在那里提供应用程序而不是 json 文件。

请注意，对 Web 上的 Rest api 的注释请求成功，但仅调用本地 json 文件失败。

我正在循环我的数据列表并在视图中显示，作为 spans 标签：

<span  *ngFor="let d of myData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

如您所见，我添加了一个逗号 '**, betewen items values

这看起来像这样 ::

AAA,BBB,CCC,DDD,

但碰巧我的数据是空的：所以我想显示一些自定义字符串： "NO ITEMS"

我想在 html 部分用管道处理它

建议？

尝试从 5 升级到 Angular 6 并收到此错误：

src/app/app.component.ts(26,23) 中的错误：错误 TS2339：“Observable”类型上不存在“distinctUntilChanged”属性。

我在 app.module.ts 中导入了 distinctUntilChanged：

import "rxjs/add/operator/distinctUntilChanged";

我在 app.component.ts 中的代码：

import { Component } from "@angular/core"; import { Router, NavigationEnd } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { GeoService } from "app/services/geo.service";
import { ArbeteService } from "app/services/arbete.service";
import { GoogleAnalyticsEventsService } from "app/services/google-analytics-events.service";

import * as _ from "lodash";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent {

        //Send pageview to Google Analytics
        router.events.distinctUntilChanged((previous: any, …

我正在使用引导模式，但是当我从代码隐藏中隐藏它时，它会显示以下错误。

我正在使用 angular6。

代码

<div #exampleModal class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">

  @ViewChild('exampleModal') public exampleModal: ElementRef;

 this.exampleModal.hide();

错误信息

错误类型错误：this.exampleModal.hide 不是函数

我在 angular 5 中使用ng-multiselect-dropdown包来创建多选下拉列表。我想在关闭或隐藏下拉组件时调用一个函数。

像这样

closeDropdown : function(){
   console.log("dropdown close triggered");
}

我正在努力验证从服务器检索到的空字符串

它通常很简单，只是不起作用

<div class="ui-g-2 info-txt"
     *ngIf="appointment.Notes !==null || 
     appointment.Notes !== ''">
     <i class="fa fa-commenting-o" aria-hidden="true"</i>
</div>

<div class="ui-g-5 info-txt"
     *ngIf="appointment.Notes !==null ||     
     appointment.Notes !== ''">
     *emphasized text*{{appointment.Notes}}
</div>

<div class="ui-g-7 info-txt"
     *ngIf="appointment.Notes === null || 
     appointment.Notes === ''"
     style="padding-top: 0;">
     no hay notas disponibles
</div>

所以我正在检查一个空值或没有任何内容的字符串，问题是它仍然显示图标和空字符串

当 no hay 里面有一条消息时......没有显示，所以它在那一边工作得很好

任何帮助都非常感谢多年来一直坚持这一点。

我确定这是一个明显的我只是看不到它

我已经运行以下命令来禁用我的 angular 应用程序中生产环境的控制台日志。下面的代码在 chrome 上按预期工作，但是，它仍然在 IE 11 中显示日志。

主文件

if (environment.production) {
  enableProdMode();
if(window){
  window.console.log=function(){};
 }
}

这是一个polyfill问题吗？我无法在网上找到任何关于它的信息。

编辑

这个问题可能看起来很相似，但没有解决我的问题，即为什么将控制台日志功能覆盖为空白方法在 chrome 中有效，但在 IE 11 中无效。

我在 ngOnInit 函数中有一个带有 setTimeOut 函数的组件。要为此编写单元测试用例，我使用 tick 和 fakeAsync 来快进 setTimeOut。但是，它不会被执行，而不会调用其他函数 closeAlert()。

组件代码：

export class BannerComponent implements OnInit {

  @Input()errorData: any;

  @Input()callback: any;

  @Input()autoHide: boolean;

  constructor() { }

  ngOnInit() {

    if (this.autoHide) {
      setTimeout
        (() => {
          this.closeAlert();
        }, 500);
    }
  }

  closeAlert() {
    this.errorData = null;
    if (this.callback) {
      this.callback();
    }
  };
}

规范文件：

describe('BannerComponent', () => {
  let component: BannerComponent;
  let fixture: ComponentFixture<BannerComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ BannerComponent ]
    })
    .compileComponents();
  }));

  beforeEach(async() => {
    fixture = …

1. 我正在使用ngx-perfect-scrollbar进行滚动，垂直滚动运行良好，但水平滚动不起作用

   <perfect-scrollbar style="max-width: 100px; max-height: 200px;">
       <ul class="tab-menu">
           <li>
               <a>All</a>
           </li>
           <li>
               <a>Company</a>
           </li>
           <li>
               <a>People</a>
           </li>
           <li>
               <a>Announcement</a>
           </li>
           <li>
              <a>Event</a>
           </li>
       </ul>
   </perfect-scrollbar>
   

   Run Code Online (Sandbox Code Playgroud)

主要区别是什么

<p [ngStyle]="getStyle()"> 
// getStyle returns a string like "color:blue" and some other attributes

到

<p appStyle [status]="myStatus">
//directive get myStatus as a input and calculate the style of the tag

我正在做维修电话，这些功能的应用getStyle上ngStyle有很多（可能5K次）。我目前正在将样式计算更改为指令，因为我认为它更干净。

但是不知道对性能有多大影响。我怎么能测量它？

另一个问题，是否有文档/教程/书籍可以解释这样的事情？

谢谢