标签: angular5

我正在创建一个简单的论坛。

我想过滤帖子。我在RxJS中使用.pipe和.filter遇到了一些麻烦。

我试图：

• 从中检索in-memory-api帖子列表api/posts，当与http.get一起使用时，它返回一个Observable<Post[]>
• 重复遍历Post中的Observable<Post[]>每个帖子并对其进行过滤，以便仅选择ID为1（每个ID的帖子1）的每个帖子。
• 将任何错误或功能成功登录到控制台

在filter不选择在每个单独的片Post[]阵列，而是选择Post[]本身。

我的代码：

getPosts(): Observable<Post[]> {

  // Sets the url to the service's postsUrl
  const url = this.postsUrl;

  // The http.get returns an Observable<Post[]>
  return this.http.get<Post[]>(url)
    .pipe(
      filter(
        post: Post => post.id == 1
      ),
      // Log posts were fetched
      tap(posts => console.log('Posts fetched.')),
      // Error handling
      catchError(this.handleError('getPosts', []))
    );
 }

我的错误：

Property 'id' does not exist on …

我正在处理日历。我想将最大日期设置为今天并禁用未来日期。

HTML

 <div [ngClass]="setClassDOB()">
 <input type="date" formControlName="dob" name="dob">
 </div>

我应该在组件端（TS）做什么？

setInterval() 对我来说工作正常并且计时器启动，但是当计数器值达到 100 时 clearInterval() 不会停止计时器。它连续运行。任何帮助表示赞赏。

以下是我的组件代码 -

export class AppComponent {
  counter=0;
  progressInterval;

  ngOnInit(){
    this.progressInterval=setInterval(()=>{
      this.counter=this.counter+10;
      if(this.counter>=100){        
          clearInterval(this.progressInterval);
      }
    },200);
  }
}

下面是我的组件 HTML 代码 -

<p style="margin:20px;">
    <ngb-progressbar
      type="warning"
      [value]="counter"
      [striped]="true"
      [animated]="true"
    >{{counter}}</ngb-progressbar>
  </p>

这是显示进度条的屏幕截图 -

截屏

谢谢

我有一个选择的反应形式

<select [(ngModel)]="user.positionId" name="positionId" class="custom-select form-control form-control-sm" required
        formControlName="positionId"
        [ngClass]="{
        'is-invalid': positionId.invalid && (positionId.dirty || positionId.touched),
        'is-valid': positionId.valid && (positionId.dirty || positionId.touched)
        }">         
    <option value="">--Select--</option>
    <option *ngFor="let position of user.positionSelectList" value="{{position.value}}">
        {{position.text}}
    </option>
</select>

它获得传递的positionId，它是可为空的数字

export class User{
    id: string;
    userName: string;
    positionId?: number;
}

当我将数字值作为positionId传递时，上述方法有效。

但是，当它传递一个空值时，则不会选择默认选项“ --Select--”，但是会在其上方显示一个附加的空白选项。

我尝试过的。

 <option value=null>--Select--</option>    

和

 <option value=udefined>--Select--</option>

但这给出了与未选择“ --Select--”相同的结果

我不希望将硬编码数字值设置为固定数字，例如-1，因为我需要进行必要的验证，如果未选择，则需要空白值。

我有一个允许上传文件的 Angular 5 项目，我想给用户一个他们可以先下载的示例/模板文件。

文件结构

file-importer/
  | file-importer.component.html
  | file-importer.component.ts
  | example-file-template.csv

在那个 HTML 文件中，我想做这样的事情

<a href='example-file-template.csv' download>
  Download a sample template here
</a>

但是那个链接是不正确的，那么我应该如何链接到这样的静态文件呢？

我有一个平均堆栈。角 5。

我正在从表单中获取数据，并且正在调用一个服务来处理将表单数据发送到后端 api。

该服务使用 HttpClient。它发送带有正确标头和有效负载的 post 请求。它成功发布到数据库

但是...当我查看控制台的网络选项卡时，我看到 2 个相同的请求正在发出！一个成功，因为它是预期的请求，但另一个失败（由于db中的重复数据，它应该失败）

我不明白为什么要提出 2 个请求。我正在使用平均堆栈，所以（我相信）不应该有任何 CORS 问题。

有任何想法吗？

*更新信息我检查了网络选项卡

• 第一个请求具有请求方法：POST (200 OK)
• 第二个请求也有请求方法：POST (500)
• 在控制台选项卡中，来自 zone.js（webpack？）的第二个请求错误

我的表格

<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="username">Username</label>
    <input 
      type="text" 
      id="username"
      class="form-control"
      formControlName="username"
      placeholder="username" >
  </div>
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email"
      class="form-control"
      formControlName="email"
      placeholder="email" >
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input 
      type="password" 
      id="password"
      class="form-control"
      formControlName="password"
      placeholder="password" >
  </div>
  <div class="form-group">
    <label for="name">Restaurant Name</label>
    <input 
      type="text" 
      id="name"
      class="form-control"
      formControlName="name"
      placeholder="Restaurant Name" >
  </div>    
  <div …

目前我正在使用 Angular 5 制作 SPA。

我想用背景（不仅仅是一个组件）填充整个屏幕，但我希望每个页面都有不同的背景，我该如何实现？

我已经在相关页面的 component.css 中尝试了这段代码（例如 home.component.css）：

body {
  background-color: aqua;
}

（以背景色为例）

使用这种方法，我以为我可以覆盖每个组件的主体背景，但它似乎不起作用，页面保持空白。

我很感激你能给我的任何帮助，在此先感谢。

我正在尝试获取 Date.now(); 当按下回车键但我收到错误消息时。:(

网上似乎也没有很多关于这个错误的信息。

export class DashboardComponent implements OnInit {
onEnter(event){
   if(event.key === "Enter"){

 this.calculateTime();
    }
  }

calculateTime(){
    if(this.date === undefined){
        this.date = new Date.now();
    }
  }

}

错误是：

错误 TS2350：只能使用“new”关键字调用 void 函数。

知道为什么我会收到此错误以及如何修复它吗？

啦啦队。

我正在使用angular5 ng-select组件：https : //github.com/ng-select/ng-select， 并尝试在首次加载容器组件时（以编程方式）设置选定值（在模型）。我没有找到任何相关属性或每个项目的isSelected属性。这是我的代码（已过滤）：HTML：

<ng-select [items]="filter.values"  bindLabel="text" bindValue="id" class="input-md" [(ngModel)]="filter.selectedValue"></ng-select>

模型：

export class FilterData
{
    Name : string;
    FormattedName : string;
    values : Filter[];
    selectedValue : Filter = null;
    constructor(filterData : FilterData)
    {
        this.Name = filterData.Name;
        this.values = filterData.values;
        this.selectedValue = typeof filterData.selectedValue == "undefined" ? null : filterData.selectedValue;
    }
}

export class Filter 
{
    public id: number;
    public text: string;
}

我正在使用角度5，并且有一个mat-progress-bar。我还有一个2 * 60的计时器，表示2分钟。我想每秒减少进度栏的值，两分钟后，栏的值变为0！我该怎么做？