标签: angular5

我试图从我的后端api返回产品并将其显示在我的前端页面上。当我执行* ngFor循环时，它给了我一个错误。这是我的代码。

我的后端API

data    
   0    
    name    "perferendis"
    totalPrice  323.76
    rating  5
    discount    43
  href  
    link    "http://localhost:8000/api/products/1"
   1    
     name   "non"
     totalPrice 92.34
     rating 3.5
     discount   19
   href 
      link  "http://localhost:8000/api/products/2"
    2   
     name   "a"
     totalPrice 246.76
     rating 3
     discount   38
  href  
    "http://localhost:8000/api/products/3"
    3   
     name   "vitae"
     totalPrice 537.57
     rating "No rating yet"
     discount   1
   href 
     link   "http://localhost:8000/api/products/4"

  links 
     first  "http://localhost:8000/api/products?page=1"
     last   "http://localhost:8000/api/products?page=3"
     prev   null
     next   "http://localhost:8000/api/products?page=2"
meta    
   current_page 1
from    1
last_page   3
path    "http://localhost:8000/api/products"
per_page    20
to  20
total   60

我的服务

getProducts(): Observable<any> …

我正在制作一个平均堆栈购​​物应用程序(Angular 5).我制作了一个管理产品组件,其中包含所有产品的列表和删除按钮.删除按钮有效,但产品在表中列出,因为它已从数据库中删除.所以,我想知道是否有任何可能的方法在删除后重新渲染或刷新组件.我试图导航到同一页面,但它不会工作,因为角度不允许.请任何人都可以帮忙.我在stackoverflow上找不到任何具体的答案,所以我不得不问它.

我的manage-product.component.ts是: -

import { Component, OnInit } from '@angular/core';
import { ProductManageService, ProductDetails } from '../product-manage.service';
import { AllService } from '../all.service';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-manage-product',
  templateUrl: './manage-product.component.html',
  styleUrls: ['./manage-product.component.css']
})
export class ManageProductComponent implements OnInit{

    prodData : ProductDetails = {
    prodName: '',
    prodPrice: '',
    prodImage: '',
    prodSize: ''
    }

    data: any=[];

  constructor(private add:ProductManageService,
    private router: Router,
    private http:HttpClient,
    private …

每当我尝试过滤表格的一列时,我都会遇到此错误.我从FireStore云集合中获取数据,并且每个文档中的字段auteur都已明确定义.

这是我的组件的样子

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

import { Router } from '@angular/router';
import { DataService } from '../../services/data.service';
import { Observable } from 'rxjs/Observable';
import { AngularFirestore } from 'angularfire2/firestore';
import { AuthentificationService } from '../../services/authentification.service';

@Component({
  selector: 'app-data-preview',
  templateUrl: './data-preview.component.html',
  styleUrls: ['./data-preview.component.css']
})
export class DataPreviewComponent implements OnInit {
  rows = [];
  temp = [];
  selected: any[] = [];
  columns;
  panelOpenState = false;
  id: any;

  @ViewChild(DataPreviewComponent) table: DataPreviewComponent;

  constructor(private router: Router, private dataService: DataService,
     private afs: …

嗨,我正在尝试创建一个新用户,这个语法不起作用,它说'用户'只引用一个类型,但在这里被用作值.

 onSubmit() {
    if (this.userForm.valid) {

        let user: User = new User(null,
        this.userForm.controls['cin'].value,
        this.userForm.controls['familyName'].value,
        this.userForm.controls['givenName'].value,
        this.userForm.controls['email'].value,
        this.userForm.controls['description'].value,
        this.userForm.controls['code'].value);
        this.adminService.createUser(user).subscribe();
     }
  }

export interface User {
  cin: string;
  givenName: string;
  familyName: string;
  role: string;
  id: string; 
  email: string;   
}

这是因为User被声明为接口？我怎么解决它？提前致谢 :)

我正在使用Angular 5构建一些应用程序(是的,不止一个).我正在尝试遵循所有Angular dos和don'ts

但我无法理解一些事情

1)这个之间的区别......

this._http.get<User>(this._ubiRest.servicesUrls.getUser)

...还有这个

this._http.get(this._ubiRest.servicesUrls.getUser)

如果反正我必须使用map方法来强制转换为User(或者我可能不会？)

2)在服务中这样做会更好......

getUserData(): Observable<User> {

        return new Observable((observable) => {

            if (!!this._loggedUser) {
                observable.next(this._loggedUser);
                observable.complete();
            }
            else {
                this._http.get(this._ubiRest.servicesUrls.getUser)
                    .map(this._extractData)
                    .subscribe(user => {
                        this._loggedUser = user;
                        observable.next(user);
                        observable.complete();
                    }, this._handleError);
            }

        })
    }

...或这个？

getUserDataX(): Observable<User> {
    if (!!this._loggedUser) {
        return new Observable(observable => {
            observable.next(this._loggedUser);
            observable.complete();
        });
    }
    else {
        return this._http.get<User>(this._ubiRest.servicesUrls.getUser)
           .map(this._extractData)
           .catch(this._handleError);
    }
}

我正在尝试将nolimts4web swiper集成到我在index.html文件中使用的Angular 5项目中

<head>
    ...
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/css/swiper.min.css">
</head>
<body>
    ...
  <script 
    src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.2/js/swiper.min.js"> 
  </script>
</body>

将其放在我的HTML文件中：

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <div class="swiper-scrollbar"></div>
</div>

并通过将其放在body标签末尾之前进行初始化index.html：

<script>
  var mySwiper = new Swiper ('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })
 </script>

发生的是它slide 1在滑动器中显示，但是单击“下一步”按钮没有任何作用，我也无法滑动，基本上操作无效。

我正在为我的项目使用角度5.我试图从子组件中发出事件

@Output studentUpdated:EventEmitter<any> = new EventEmitter()
updated(e){
   this.studentUpdated.emit(e);
}

并在父组件中列出

<student (studentUpdated)="showSuccess($event)" />

哪个工作如预期.但是在我的学生组件中,我需要实现几个事件.例如保存,更新,删除,确认,预定......等

我在思考而不是每行编写一个事件并单独调用它们,是否有可能我们可以初始化事件数组并根据需要执行它们.例如

  @Output() events:EventEmitter<any>[] = []
  for(var keyNum in arrayOfEvents)
  {
        var key = arrayOfEvents[keyNum];
        this.events.push(new EventEmitter())
  }

然后在某些事件中,我们根据索引发出事件.

this.events[0].emit(e)

如果我们可以,那么我们如何做到这一点,以及我们如何在父组件上监听该事件？

我正在使用相同的组件进行编辑以及添加新条目。

if(this.action='edit'){
    this._PersonnelService.getUsersById(this.selectedperid)
      .subscribe((userdata: Iuser) => { this.personnel = userdata[0]; this.personnel.perid = this.selectedperid;console.log(userdata[0]); }, (error) => {
        this.statusMessage = 'Problem with service. Please try again.'
        console.error(error);
      });
   }
    else{     this.personnel=null}

  }

这意味着如果将this.action变量add this.personnel设置为null。

现在，在HTML中，我具有以下元素：

<input type="text"   class="form-control" name="PerFullName"  
[(ngModel)]="personnel.perfullname" id="fullname ">

我在控制台中收到大量错误。我的文本框不可见。
我该如何解决？

我有一个简单的列表，它双向绑定了hero.component.ts中的参数hero。

 <li *ngFor="let power of hero.powers; let i = index">
      <input [(ngModel)]="hero.powers[i]"/>
 </li>