Javascript 如何创建角度模式以将存款添加到客户端面板应用程序？

我正在尝试创建一个弹出模式，允许用户向客户帐户添加存款。我得到一个错误，说“存款.金额”不是存款模式的已知属性…所以显然我不知道如何定义属性，因为我认为我有

另外，我希望存款能影响我还没看过的余额，但下一步我会设法弄清楚

我很抱歉这是一个很难回答的问题…我正在尽我所能尽快学习角度…我有两个角度的课程要在Udemy上完成，还有一本关于它的物理书，我将开始每晚阅读。但在此期间…如果您能提供任何帮助或建议，我们将不胜感激！非常感谢你

这是我的档案：

---

deposit modal使用构造函数为输入构造函数中的属性提供值和更少值是不好的-如果对象为null，则会给您一个错误。如果您想根据输入中的缺陷给出一个值，请使用

@input（）存款：存款={amount:0，存款.日期：new date（）}

谢谢，我已经解决了这个问题，但是我仍然无法将值从模式输入传递到父组件。错误在这里：

这是说，存款金额不是client modal的已知属性。我能想到的一个非常好的解决方案是使用棱角材料。它可以创建一个对话框，并在其中传递数据。检查一下：我不希望只为单个组件创建依赖项。另外，我实际上已经解决了…我不再得到任何错误，但数据仍然没有被传递…：（实际上，由于您的

@Input（）

是一个对象，您不需要传递值-它会自动更改-我认为这是问题所在，当您在客户端定义

存款时，必须是
存款：Array=[]
。请注意您需要创建为空数组（当que等于[]），否则该值为null，您无法进行“推送”使用构造函数为作为输入的属性提供值和更少值是不好的，因为构造函数中的对象为null，因此，Angular会给您一个错误。如果您想通过输入中的缺陷提供值，请使用
@input（）存款：存款={金额：0，存款。日期：新日期（）}
谢谢，我已经解决了这个问题，但是我仍然无法将模态输入的值传递给父组件。错误在这里：
这是说deposit.amount不是客户端模态的已知属性。我能想到的一个非常好的解决方案是使用角度材质。它有一种方法可以创建一个对话框，并在其中传递数据。检查It out：我不希望只为单个组件创建依赖项。而且，我实际上已经解决了这个问题…我不再得到任何错误，但数据仍然没有被传递…：（实际上，作为您的
@Input（）
是一个对象，您不需要传递值-它会自动更改-我认为这是问题所在，当您在客户端定义
存款时，必须是
存款：数组=[]
。请注意您需要创建为空数组（当que等于[]时），否则该值为空，您无法进行“推送”
import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { Deposit } from '../../../models/Deposit';


@Component({
    selector: 'deposit-modal',
    templateUrl: './deposit-modal.html',
  })

export class DepositModal {
    @Input() deposit: Deposit;
    @Output() close = new EventEmitter<Object>();

    constructor() {
        this.deposit.amount = 0;
        this.deposit.date = new Date();
    }

    ngOnInit() {


    }

    ok() {
        this.close.emit(this.deposit);
    }

    cancel() {
        this.close.emit(null);
    }
}

<div>
    Add Deposit
    <input type="number" (change)="deposit.amount = $event.target.value;"/>
    <button type="button" (click)="ok()">OK</button>
    <button type="button" (click)="cancel()">Cancel</button>
</div>


import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
import { DepositModal } from './deposit-modal/deposit-modal';

import { Client } from '../../models/Client';

@Component({
  selector: 'app-client-details',
  templateUrl: './client-details.component.html',
  styleUrls: ['./client-details.component.css']
})
export class ClientDetailsComponent implements OnInit {
  id: string;
  client: Client;
  hasBalance: boolean = false;
  showBalanceUpdateInput: boolean = false;
  deposits: Array<Object>;
  amount = 0;
  showIt: boolean = false;

  showModal() {
    this.showIt = true;
  }

  closeModal(deposit: Object) {
    this.showIt = false;
    if (deposit)
    this.deposits.push(deposit);
  }


  constructor(
    private clientService: ClientService,
    private router: Router,
    private route: ActivatedRoute,
    private flashMessage: FlashMessagesService
    ) { }

  ngOnInit() {
    // Get id from url
    this.id = this.route.snapshot.params['id'];
    // Cet client
    this.clientService.getClient(this.id).subscribe(client => {
      if(client != null) {
        if(client.balance > 0) {
          this.hasBalance = true;
        }
      }
      this.client = client;
    });
  }

  updateBalance(id: string) {
    this.clientService.updateClient(this.client);
    this.flashMessage.show('Balance Updated', {
      cssClass: 'alert-success', timeout: 4000
    });
  }

  onDeleteClick() {
    if(confirm('Are you sure?')) {
      this.clientService.deleteClient(this.client);
      this.flashMessage.show('Client Removed', {
        cssClass: 'alert-success', timeout: 4000
      });
      this.router.navigate(['/']);
    }
  }

}


<div class="row">
    <div class="col-md-6">
        <a routerLink="/" class="btn btn-link">
        <i class="fa fa-arrow-circle-o-left"></i> Back to Dashboard
    </a>
    </div>
    <div class="col-md-6">
        <div class="btn-group pull-right">
            <a routerLink="/client/edit/{{ id }}" class="btn btn-warning m-1 rounded">
            Edit
        </a>
          <a routerLink="/client/history/{{ id }}" class="btn btn-dark m-1 rounded">
          Deposit & Withdrawal History
      </a>
        <button (click)="onDeleteClick()" class="btn btn-danger m-1 rounded">Delete</button>
        </div>
    </div>
</div>
<div *ngIf="client" class="card">
  <div class="card-header">
    <h3 class="d-inline">{{ client.firstName }} {{ client.lastName }}</h3>
    <button type="button" (click)="showModal()" class="btn btn-success m-1 rounded d-inline pull-right">
     Add Deposit
    </button>
    <deposit-modal *ngIf="showIt" [deposit.amount]="amount" (close)="closeModal($event)"></deposit-modal>
  <a routerLink="/client/history/{{ id }}" class="btn btn-success m-1 rounded d-inline pull-right">
    Add Withdrawal
 </a>
</div>
    <div class="card-body">
      <div class="row">
        <div class="cold-md-8 col-sm-6">
          <h4>Client ID: {{ client.id }}</h4>
        </div>
        <div class="cold-md-8 col-sm-6">
          <h5 class="pull-right">Current Balance: 
            <span
              [class.text-danger]="hasBalance"
              [class.text-success]="!hasBalance">
              {{ client.balance | currency: 'USD':'symbol' }}
            </span>
            <small>
              <a (click)="showBalanceUpdateInput = !showBalanceUpdateInput">
                <i class="fa fa-pencil"></i>
              </a>
            </small>
          </h5>
          <div class="clearfix">
            <form *ngIf="showBalanceUpdateInput" (submit)="updateBalance()">
              <div class="input-group">
                <input type="text" name="balance" class="form-control ml-auto" style="max-width: 100px;" [(ngModel)]="client.balance">
                <span class="input-group-btn">
                  <button type="submit" class="btn btn-primary m-1">Update</button>
                </span>
              </div>
            </form>
          </div>
        </div>
      </div>

      <hr>
      <ul class="list-group">
        <li class="list-group-item">Contact Email: {{ client.email }}</li>
        <li class="list-group-item">Contact Phone: {{ client.phone }}</li>
      </ul>
    </div>
  </div>


import { Deposit } from './Deposit';

export interface Client {
    id?: string;
    firstName?: string;
    lastName?: string;
    email?: string;
    phone?: string;
    balance?: number;
    deposits?: Array<Deposit>
}

export interface Deposit {
    id?: string;
    amount: number;
    date: Date;
}