Угловой - Сравнить объектную модель с начальным значением модели в представлении

Question

Я пытаюсь обнаружить изменения в свойствах модели под названием 'invoice', чтобы кнопка могла быть включена только в том случае, если значения этого объекта не совпадают со значениями исходной модели, 'initModel ', созданный при инициализации компонента.

Так что мне нужно иметь возможность сравнить два в представлении следующим образом:

<button mat-button (click)="saveChanges()" [disabled]="invoice !== initModel">Save Changes</button>

Модель 'invoice' инициализируется путем присвоения ей значения другой переменной из службы в конструкторе.

Я попытался выяснить способ установки переменной компонента 'initModel', но это, очевидно, связано с моделью 'invoice', поэтому, когда изменяется 'invoice', меняется и 'initModel', и я невозможно установить initModel как const, к которому можно получить доступ в представлении.

Компонент:

export class EditInvoiceComponent implements OnInit {

  invoice: Invoice;
  initModel;

  constructor(private invoicesService: InvoicesService) {
    this.invoice = this.invoicesService.selectedInvoice;
    this.initModel = this.invoice;
  }

Answer 1

Вы можете попробовать код ниже:

$scope.isInvoiceValueChange=false;
$scope.$watch('invoice', function (newValue, oldValue, scope) {
                // Your logic here to validate value change with  initModel
            $scope.isInvoiceValueChange= true |false ; // based on your logic
},true); // use true if you need to watch nasted prop to trace 


<button mat-button (click)="saveChanges()" [disabled]="isInvoiceValueChange">Save Changes</button>

Answer 2

Когда вы инициализируете initModel, вы не создаете новый объект, вы просто передаете ссылку на существующий объект invoice.

Вы можете использовать Оператор распространения , чтобы создать клон ( не глубокий клон , обратите внимание) исходного объекта:

this.initModel = {...this.invoice};

Если вам требуется глубокое клонирование, вы можете использовать внешние библиотеки (например, lodash ), взгляните на этот подробный ответ.