angular 9 分页示例类型 'String' 不可分配

Question

我是 angular 9 的新人。我目前正在研究 angular 9 的分页。请帮我.. Angular 9 使用 ngx-pagination 分页到 HTML table。

src/app/app.component.html:20:17 - 错误 TS2322：类型 'String' 不可分配给类型 'string | number'。类型 'String' 不能分配给类型 'string'。 'string' 是原始对象，而 'String' 是包装器对象。尽可能使用 'string'。

错误图片 - enter image description here

app.component.ts

import { Component } from '@angular/core';
import { RandomUserService } from './services/random-user.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
data:Array<any>
totalRecords:String
page:Number =1

  title = 'pgAng';
  constructor(private randomUser:RandomUserService)
  {
    this.data = new Array<any>()

  }
  ngOnInit() {
  console.log('gggg');
        this.getUsers();
    }
 
  getUsers(){
    this.randomUser.getData().subscribe((data)=>{
    console.log(data)
    this.data = data.results
    this.totalRecords = data.results.length
    console.log(this.page)
    })

  }
}

app.component.html

<!-- npm i ngx-pagination-->
<div class="container">

<button type="button" (click)="getUsers()" class="btn btn-danger">Get Users</button>


<table class="table table-striped">
  <thead>
  <tr>
  <th>Gender</th>
  <th>Name</th>
  <th>Email</th>
  <th>Picture</th>
  </thead>
  <tbody>
    <tr *ngFor="let user of data | paginate: { id: 'listing_pagination',
    itemsPerPage: 10,
    currentPage: page,
    totalItems: totalRecords }">

  <td>{{user.gender}}</td>
<td>{{user.name.first}}</td>
<td>{{user.name.email}}</td>

<td><img src="{{user.picture.medium}}"></td>
  </tr>
  </tbody>
  </table>

  <div>
  <pagination-controls  id="listing_pagination" maxSize="5" directionLinks="true" (pageChange)="page = $event"></pagination-controls>
 </div>

</div>

随机-user.service

import { Injectable } from '@angular/core';
import{HttpClient} from '@angular/common/http';
import { Observable } from 'rxjs';

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

  constructor(private http:HttpClient) { }
  getData():Observable<any>{
    const url ="https://randomuser.me/api?results=100"
    return this.http.get<any>(url)
  }
}

Answer 1

消息不言自明。

src/app/app.component.html:20:17 - error TS2322: Type 'String' is not assignable to type 'string | number'. Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. Prefer using 'string' when possible.

这表示您已将属性声明为 String 类型，但您将属性分配给声明为 string | number 的类型.

在 Typescript 中，类型 string | number 意味着您希望属性是类型 string 或类型 number.

在 Javascript 中，String 是 class 原始 string 类型的包装器。 2个不一样。一个区别是 String 使用引用相等，而 string 使用值相等。

const s1 = 'abc';
const s2 = 'abc';

const S1 = new String('abc');
const S2 = new String('abc');

console.log('literals match: ', s1 === s2);
console.log('wrappers match: ', S1 === S2);

解决方案

首先需要注意的是，这只是Typescript编译时的错误。当代码编译为 Javascript 时，没有声明类型这样的东西。

您应该修改属性类型声明以使用基本类型。

totalRecords: number; // change String ->number
page: number = 1;     // change Number -> number. 
                      // Type declaration is redundant when assigning 
                      // from a literal

您正在从 data.results.length 设置 totalRecords，因此您知道这是一个数字。如果它是一个字符串，您可以将其声明为 string.

angular 9 分页示例类型 'String' 不可分配

angular 9 Pagination Example Type 'String' is not assignable

api

pagination

angular

angular9

app.component.ts

app.component.html

随机-user.service

解决方案