标签: angular6

我尝试使用 ng-select 并遇到了一些问题。当我尝试禁用它时，如何更改 ng-select 中禁用的颜色。我还希望箭头图标在禁用时隐藏？我已经尝试过下面的代码，但它仍然无法工作。

更改禁用颜色

.ng-select.ng-select-red {
  color: green;
  background-color: green;
}

禁用时隐藏箭头

.ng-select:disabled.ng-arrow {
   display: none;
}

我正在使用 bootstrap 4 模式，然后是示例

下面是模板代码：

<div class="container">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
      Open
    </button>

    <div class="modal" id="myModal">
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Modal Heading</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- Modal body -->
          <div class="modal-body">
            Modal body..
          </div>

           <button type="button" class="btn btn-danger"  (click)="save()">Save</button>

        </div>
      </div>
    </div>

  </div>

单击open按钮时，我将打开对话框窗口，单击save按钮时，我将调用save()方法。在 .ts中，我在方法内编写了一些条件，save如下所示：

 save(){
  if(condition){
    ......don't close the modal....
  } else{
   ......close the modal.... …

我需要保留应用的过滤器。当我更改组件或返回到前一个组件时，我希望已经应用过滤器（保持不变）。我需要添加一个函数来将过滤器参数保存在 localStorage 中，以及一个函数来读取这些参数。有人可以帮忙吗？

我将开始在 Angular 6+ 中使用 RXJS 和套接字 io，但在此之前我想知道这两者是否相同或不同。有人可以帮助我在 Angular 中使用它们吗？

这是父组件。添加了一个子组件并传递了表单。这里同时使用表单控件名称和 NgModel（这是最佳实践吗）。加载页面控制台时出现错误“ngModel 无法用于向父 formGroup 指令注册表单控件。”

<div class="inner-wrapper">   
    <form [formGroup]="form">
     <pat-demo-information [group]="form"></pat-demo-information>
     <div class="panel-body">
        <div class="row">
            <div class="col-lg-2 col-md-3 col-sm-3">
                <div class="ui-input-group">
                    <input type="text" maxlength="15" class="form-control" [(ngModel)]="notif.en.No" formControlName="epiNo">
                    <span class="input-bar"></span>
                            <label>No.</label>
                 </div>
            </div>
        </div>
     </div>  
</div>
</form>
</div>

这是子组件

@Component({
  selector: 'patient-demographic-information',
  templateUrl: './pat-demo-information'
})
export class PatDemoInfoComponent implements OnInit {

    @Input() patientForm: FormGroup
    noti: MaltreatmentNoti;


  instid: number;
  instPatientid: number;
  latitude: number;
  longitude: number;

  enMpi: Mpi = new Mpi();

  constructor(private formBuilder: FormBuilder) {

  }

  ngOnInit() {
    this.notification = new MaltreatmentNoti();
    this.notification.enMpi …

我正在监视inemit的方法EventEmitterAngular

spyOn(answerComponent.answerEmitter, 'emit');

我想检查是否emit带有参数调用A，但我不想检查与A. 我想检查是否emit使用值调用A.a, A.b并忽略 的值A.c。

可以这样做吗？

我正在使用 Angular6 和 typeScript4.1.2 并尝试从 app.component.ts 加载图像并将其绑定到 app.component.html 但图像没有显示。奇怪的是，当我尝试直接在 app.component.html 中加载它时，图像是可见的。请帮助我了解 app.component.ts 中缺少的内容

应用程序组件.ts：

declare function require(path:string):string;\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\n\nexport class AppComponent {\n  title = 'angular-ui';\n  imagesrc = require('../assets/images/myimage.png');\n}\n

应用程序组件.html：

<nav\xc2\xa0class="navbar navbar-expand-lg navbar-light bg-light">\n  <div class="container-fluid">\n    <div class="navbar-header">\n      <a class="navbar-brand" href="#">        \n        <img src={{imagesrc}} height="26"/>\n        <!-- <img src="../assets/images/myimage.png" height="26"/> -->\n      </a>\n      Test\n    </div>\n  </div>\n</nav>\n

我已经尝试了几乎所有组合来访问 app.component.ts 中的 myimage.png 但这些都不起作用

imagesrc = require('../assets/images/myimage.png');\nimagesrc = require('/assets/images/myimage.png');\nimagesrc = require('assets/images/myimage.png');\n …

这是我的 service.ts 文件

import { Inject, Injectable } from '@angular/core';
import { inject } from '@angular/core/testing';

@Injectable({
  providedIn: 'root'
})


export class Product{
  constructor(
     public id: number,
     public title: string,
     public price: number,
     public rating: number,
     public description: string,
     public categories: string[]){}
}


export class ProductService {

  constructor() { }
  getProducts(): Product[] {
    return products.map(p =>new Product(p.id, p.title, p.price, p.rating, p.description, p.categories));
  }
}


const products =[
  {
    'id': 0,
    'title': 'First product',
    'price': 24.99,
    'rating': 4.3,
    'description': 'This is …

有人知道，Angular6中的Renderer3是否会与Angular5向后兼容？在我们的库中，我们使用Renderer2，我们想知道Renderer3是否会与Angular 5向后兼容。

最近我将角度5升级到角度6,因此我升级了服务代码如下:

register(postBody: any): Observable<any> {
return this.http
  .post(this.remoteUrl + "auth/register", postBody)
  .pipe(
    catchError(this.handleError("register", []))
  );
}

this.authService.register(this.formObj.value).subscribe(
    response => {

    }
)

现在,当我从API获得400错误时.我能够在错误处理程序中捕获此错误但仍然订阅执行,为什么？订阅应该只在获得没有错误的响应时调用.

我是新手,但在角度5中它并没有发生.所以任何人都可以纠正我的错误吗？