Question

我遇到了一个我根本不了解的问题。我是个新手，所以它可能很小，但永远不会少。

当我尝试构建项目以将其发布到github页面时，由于该组件的属性不存在，因此HTML组件的构建失败。所有错误都与HTML组件没有脱离对象属性有关。（仍然可以通过API服务提供！）

我试图提供所需的最少代码来说明问题。

错误转储：

ERROR in src\app\users\users.component.html(4,20): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\users\users.component.html(9,7): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\users\users.component.html(4,20): : Property 'queryString' does not exist on type 'UsersComponent'.
src\app\details\details.component.html(1,5): : Property 'name' does not exist on type 'Object'.
src\app\details\details.component.html(4,32): : Property 'RunnerName' does not exist on type 'Object'.
src\app\details\details.component.html(5,29): : Property 'LastTime' does not exist on type 'Object'.
src\app\details\details.component.html(6,29): : Property 'LastDistance' does not exist on type 'Object'.
src\app\details\details.component.html(7,29): : Property 'date' does not exist on type 'Object'.

user.component.html

<h1>Runners</h1>

<div>
<input type="text" [(ngModel)]="queryString" placeholder = "Search Runner Name">
</div>

<ul>
  <li *ngFor = "let user of users | filterdata: queryString : 'RunnerName' ; let i = index">

    <a routerLink = "/details/{{ user.RunnerId }}">{{ user.RunnerName }}</a>

    <ul>
      <li><strong>Runner ID: {{ user.RunnerId }}</strong></li>
    </ul>

  </li>
</ul>

user.component.ts

import { Component, OnInit } from '@angular/core';
//Importing my users service, up one level in project structure from here.
import { DataService } from '../data.service';
//RXJS will hold the data which is returned from the API...
//RESEARCH RXJS
import { Observable } from 'rxjs';
import { FormsModule } from '@angular/forms';
import { Pipe, PipeTransform } from '@angular/core';


@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})

//Export class implenets OnInit.
export class UsersComponent implements OnInit {

  //Prop which holds returned API data
  //of type obect.
  users: Object;

  //Creating instance of the service via dependancy injection.
  constructor(private data: DataService) { }

  //NG on init is one of the "lifecycle hooks" for angular components.
  //Code in here will be executed when the component loads for ngOnInit.
  ngOnInit() {
    //Executing the method which is provided by the service.
    //Adding data bind via subscribe.
    this.data.getUsers().subscribe(
      //returning the user data via single line return function
      //passing the data value into the function.
      (data) => {
      //assinging the data to the user object.
      this.users = data
      //sorting the users object by runner ID.
      //this.users.sort((a,b) => a.RunnerId - b.RunnerId);
      }
    );
  }

}

data.service.ts

import { Injectable } from '@angular/core';
//Importing te angular HTTP Client
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

//Class which exports the service to the APP.
//We will import this class into the components when required.
export class DataService {

  //Utilising the HTTP client import Class
  //HTTP Client request expects JSON return data as default, their is no need to parse JSON anymore.
  constructor(private http: HttpClient) {}

  //Custom Method to return Users collection from the web API.
  getUsers(){
    //single line return statement.
    return this.http.get('http://rundistance.azurewebsites.net/api/RunnerService')
  }
  //Function to return the detail of a single user, passing in the ID prop of currently selected target of objects master layer.
  getUser(userId){
    //single line return statement getting target object from API.
    return this.http.get('http://rundistance.azurewebsites.net/api/RunnerService/'+userId)
  }
  //Returning posts from API.
  getPosts(){
    //single line return statement.
    return this.http.get('https://jsonplaceholder.typicode.com/posts')
  }
}

filterdata.pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DataService } from './data.service';

@Pipe({
  name: 'filterdata'
})

export class FilterdataPipe implements PipeTransform {

  transform(items: any[], value: string, label:string): any[] {
    if (!items) return [];

    if (!value) return  items;

    if (value == '' || value == null) return [];
    return items.filter(e => e[label].toLowerCase().indexOf(value) > -1 );
  }

}

无法建立角度项目-组件

0 个答案: