标签: angular6

我有这个带有 html 的组件：

    <div *ngFor='let option of options'>
      <label [ngClass]="clazz" 
         (mouseover)="clazz='highlightedOption'" 
         (mouseout)="clazz='normalOption'" 
         (click)="navigate(option)">
        {{option | uppercase}}
        <br/>
      </label>
    </div>

这options是array ['x', 'y', 'z']在同一组件的打字稿中定义的。

问题是，在悬停时，从 生成的所有三个类（或 clazz）都会发生变化。我希望类仅针对悬停的 进行更改。divs*ngFordiv

我想了解如何使用(mouseover)with *ngFor，并像这样更改类。我在这里做错了什么吗？

假设有一个组件ButtonComponent 和SideComponent。如何将“ButtonComponent”作为属性传递给“SideComponent”？

例如，

@Component({
  selector: 'my-btn',
  template: '<span>My button</span>'
})
export class ButtonComponent implements OnInit {

} 


@Component({
  selector: 'my-side',
  template: '<div><div class="btn-section">{{myBtn}}</div><div class="content-section"><ng-content></ng-content></div></div>'
})
export class SideComponent implements OnInit {
   @Input() myBtn:any = null;
}

Usage:
<my-side [myBtn]="btnTmpl">
  Hello, this is my content
</my-side>
<my-btn #btnTmpl></my-btn> 

但这不起作用，最终模板显示 [Object Object] 作为输出。

如果我单击单选按钮，我想更改背景颜色。

.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  color: white !important;
}

.btn-primary {
  color: black;
  background-color: white;
  width: 100%;
}

<div class="btn-group">
  <div class="radiobuttonWidth">
    <p-radioButton [somethink]="some"> </p-radioButton>
  </div>
</div>

悬停效果有效，但活动效果无效

我正在开发一种注册表单，我需要最大长度验证，但使用模板驱动表单无法显示最大长度警报消息。

<input  type="text" class="form-control" placeholder="Enter  Name"maxlength="4" 
        name="name"  [(ngModel)]="name" ngModel required #username="ngModel">
<div *ngIf="username.invalid && (username.dirty || username.touched)">
    <p style="color:red;font-size:10px;" *ngIf='username.invalid.maxlength'>
        You enter only 4 characters.
    </p>
</div>

我想显示数据库中的数据（使用 PHPMYADMIN）。我想要显示的数据使用 ng2-ckeditor (Angular 6) 存储。因此，当它给出结果时，它还会显示 html 标签，这是我不想要的。如何在不显示 HTML 标签的情况下获取结果？

这是为了在html页面中显示

（并且 newsArray是对象类型）正在显示数据，但带有 html 标签

   <div *ngFor="let item of newsArray">
                    <div class="panel-body">
                      {{item.details}}
                    </div>   
   </div>

给出的结果是：

<p>hello</p>

但预期结果：

hello

我正在尝试将 ngFor 中的 orderBy 管道与异步管道一起使用。但它给出以下错误：

ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'orderBy' could not be found ("
          </div>
          <div
            *ngFor="let a of arr | async | orderBy: 'b': ng:///TestModule/TestComponent.html@95:34
Error: Template parse errors:
The pipe 'orderBy' could not be found ("
          </div>
          <div

arr 返回 observables，它在没有 orderBy 的情况下工作正常，但是当我想使用 orderBy 时它给出错误：

<div *ngFor="let a of arr | async | orderBy: 'b'> </div>

下面是我的 URL，我只想要子域，即 dnyaneshtechno

网址： https: //dnyaneshtechno.sharepoint.com

根据上面的 URL，我只想获取“dnyaneshtechno”，我正在使用 Angular 8 作为前端，所以有人可以帮助我吗？

我已经创建了我的angular 6网站，但是当我要在firebase上托管时，它向我显示了Firebase的主页，而不是My Angular主页

我循环我的数据列表，并在span中显示在视图中：

 <span  *ngFor="let d of myData"> {{d.name}} ,</span>

如您所见，我在每个项目的末尾添加逗号' ， '以获取一致的视图

这导致我的外观如下：

AAA,BBB,CCC,DDD,

我的问题是**我要自动删除的最后一个逗号。

建议？

我想使用此Angular 6代码实现文件下载：

REST API：

@GetMapping("export")
    public ResponseEntity<InputStreamResource> export() throws IOException {
        ClassPathResource pdfFile = new ClassPathResource(EXTERNAL_FILE_PATH);

        HttpHeaders headers = new HttpHeaders();
        headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
        headers.add("Pragma", "no-cache");
        headers.add("Expires", "0");

        return ResponseEntity.ok().headers(headers).contentLength(pdfFile.contentLength())
                .contentType(MediaType.parseMediaType("application/pdf"))
                .body(new InputStreamResource(pdfFile.getInputStream()));
    }

服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs/index";
import {environment} from "../../../environments/environment";
import {HttpUtils} from "../common/http-utils";
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class DownloadService {

  constructor(private http: HttpClient) {
  }

  downloadPDF(): any {
    return …