angular 9 Пример разбивки на страницы Тип 'Строка' не назначается

Question

Я новичок в angular 9. В настоящее время я работаю над разбивкой на страницы angular 9. Пожалуйста, помогите мне.. Angular 9 разбиение на страницы в таблице HTML с помощью ngx-pagination.

src / app / app.component.html:20:17 - ошибка TS2322: Тип "Строка" не может быть назначен типу "Строка | число'. Тип "Строка" не может быть присвоен типу "Строка". 'string' - это примитив, а 'String' - это объект-оболочка. По возможности предпочитайте использовать "строку".

Изображение ошибки - введите описание изображения здесь

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>

random-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 - ошибка TS2322: Тип "Строка" не может быть назначен типу "Строка | количество'. Тип "Строка" не может быть присвоен типу "Строка". 'string' - это примитив, а 'String' - это объект-оболочка. По возможности предпочитайте использовать "строку".

Это означает, что вы объявили свойство типа String, но вы назначаете это свойство типу, который объявлен как string | number.

В Typescript тип string | number означает, что вы ожидаете, что свойство будет любого типа string или введите number.

В Javascript String это оболочка класса вокруг примитива 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

Вы устанавливаете totalRecords от data.results.length, так что вы знаете, что это число. Если бы это была строка, вы бы объявили ее какstring.