array.push缺少type中的以下屬性

我在 IONIC 中的注冊頁面有問題。

現在我正在使用存盤所有資料的 data.json 檔案，我想在這里創建另一個用戶（成員）。對于創建成員，我只需要一些用戶資訊（姓名、郵件和密碼），但用戶資訊存在更多資料。

我得到的錯誤是我的 arrayPush 缺少以下屬性（我不想添加而是留空的那些）。

這是我的 TS

import {Component, Input, AfterViewInit, Output, OnInit} from '@angular/core';
import { async } from '@angular/core/testing';
import { Router } from '@angular/router';
import {AlertController, ModalController, NavParams} from '@ionic/angular';
import data from '../../../../data.json'

@Component({
  selector: 'app-register',
  templateUrl: './register.page.html',
  styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
  @Input() fullName = '';
  @Input() email = '';
  @Input() password = '';
  @Input() repeatPassword = '';

  messageString: string;
  today = new Date();

  constructor(private router: Router, private alertController: AlertController) {
  }

  ngOnInit() {}

  onRegister() {
    //Grab data from HTML inputs and check if valid. If not popup.
    if (this.fullName === '') {this.messageString = "You didn't enter a name.";this.errorMessage();return;}
    if (this.email === '') {this.messageString = "You didn't enter an mail address.";this.errorMessage();return;}
    if (this.password === '') {this.messageString = "You didn't enter a password.";this.errorMessage();return;}
    if (this.password != this.repeatPassword) {this.messageString = "The passwords don't match.";this.errorMessage();return;}

    var firstname = this.fullName.split(" ")[0];
    var lastname = this.fullName.split(" ").pop();
    
    //save all data to JSON
    (data).members.push({ 
      fullname: this.fullName,
      firstname: firstname,
      lastname: lastname,
      mail: this.email,
      password: this.password,
    });
    
    //Redirect to homepage.
    this.router.navigateByUrl('/home').then(r => {});
  }
  
  // Alert emails dont match
  async errorMessage() {
    const alert = await this.alertController.create({
      cssClass: 'alerts',
      header: 'ERROR',
      message: this.messageString,
      buttons: [
        {
          text: 'Okay',
          cssClass: 'yes'
        }
      ]
    });
    await alert.present();
  }

}

這是我的 data.json

{
  "members": [
    {
      "id": 1,
      "gender": "0",
      "fullname": "X X",
      "firstname": "X",
      "infix": "",
      "lastname": "X",
      "number": "06-12345678",
      "mail": "[email protected]",
      "image": "https://pbs.twimg.com/media/EHMN4bVWoAUXhUz.jpg",
      "password": "admin1",
      "birthdate": "14-07-2001",
      "country": "Netherlands",
      "address": "Testweg 1a",
      "state": "Noord Holland",
      "city": "Amsterdam",
      "zip": "1234BC",
      "subscription": "26 Dec. 2020"
    }
  ]
}

到目前為止，我只想為新用戶全名、名字、姓氏、電子郵件、密碼填充以下 JSON 物件

uj5u.com熱心網友回復：

前言：我不完全確定代碼的總體意圖是什么，但下面的答案涉及您提到的型別問題。但是顯示的代碼推送到一個資料陣列，該陣列最初是從讀取的，data.json并且（在顯示的代碼中）似乎沒有將該陣列保存在任何地方。正如JSON Derulo 指出的那樣，推送到該陣列對data.json檔案沒有影響，只會影響記憶體中的陣列。

聽起來 TypeScript 正在推斷datafrom的型別data.json，因為您沒有明確給出型別。TypeScript 不會（不能）推斷屬性應該是可選的。為此，您必須指定它。

有幾種方法可以做到這一點。

• 自己在型別定義中列出所有屬性。
• 列出型別定義中的所有可選屬性，允許推斷其他（必需的）屬性。
• 列出型別定義中的所有必需屬性，允許推斷其他（可選）屬性。

其中，最后一個似乎對您的描述最有用：

import sampleData from "../../../../data.json";

type MemberType =
    Partial<typeof sampleData["members"][number]>
    & Pick<
        typeof sampleData["members"][number],
        "fullname" | "firstname" | "lastname" | "mail" | "password"
    >;

const data: typeof sampleData & {members: MemberType[]} = sampleData;

游樂場鏈接

這讓 TypeScript 從 推斷型別data.json，但隨后我們將所有屬性設為可選，然后使用其原始非可選定義覆寫應該需要的屬性。

標籤：数组 json 有角的 打字稿 离子框架

上一篇：字串回文

下一篇：將常量/函式移動到自定義掛鉤/可重用代碼段