내장 각도 명령 이해하기 3부분

오늘 우리는 ngModel의 세 번째 내장 각도 지령을 토론할 것이다.만약 당신이 이 지령들을 모른다면, 나는 당신이 계속하기 전에 아래의 댓글을 훑어보는 것을 강력히 건의합니다.ngModel또한 Angular에서 제공하는 속성 명령입니다.
구문[(ngModel)]="<PROPERTY>"--(상자 속의 바나나라고도 불리지만 공식적인 것은 아니다)
작은 정보-

ngModel는 양방향 데이터 귀속에 사용됩니다.

ngModel이 FormsModule에 나타납니다.

이제 쌍방향 데이터 귀속의 개념을 알아보자.그러나 시작하기 전에 우리는 더욱 중요한 삽입값 개념을 분명히 할 것이다.
구성 요소 ts 파일에 with myMarks 라는 변수가 있다고 가정하십시오. 이 예에서 이 변수의 값은 78입니다.

해당 어셈블리 템플릿 파일에 동일한 값을 표시해야 합니다.너는 어떻게 할 수 있니?
매우 간단하다interpolation.
문법은 쌍대괄호{{ <The_Variable_Name }}이다.
그래서 이런 상황에서-

{{ myMarks }}

현재, 프로그램을 시작하고 브라우저를localhost: 4200으로 이동하면, 브라우저에서 인쇄된 값 78을 볼 수 있습니다.이거 신기하죠???따라서 변수 이름을 두 개의 괄호 {{ }} 사이에 두면,angular는 뒤에서 변수 값을 TS 파일에서 HTML로 연결합니다.
경고 - 변수 이름이 정확하고 일치하는지 확인합니다.대소문자 구분
지금 계속,
예를 들어 => 템플릿에 입력 텍스트 상자가 있는 경우 구성 요소를 표시할 때 값myMarks을 표시하고 텍스트 상자의 값을 변경하면 구성 요소 TS 파일 변수에서 해당 값을 업데이트해야 합니다.
전체 장면은 양방향 데이터 연결에 불과하다.왜 양방향이야?
구성 요소 TS 파일의 변수를 model라고 하고 html은 템플릿입니다.따라서 어셈블리를 처음 로드하거나 표시할 때 모델 값이 텍스트 상자(즉, 1)에 표시되고 텍스트 상자에서 업데이트할 때 모델이 업데이트됩니다(즉, 2).우리는 데이터를 귀속시키고 있기 때문에 양방향 데이터 귀속이라고 부른다.
우리는 지령ngModel을 사용하여 같은 목표를 실현하였다
당신이 나와 지금까지 함께 있기를 바랍니다...이것은 매우 중요한 개념으로 면접에서 너도 이 점을 생각할 수 있다.
우리의 예시에서 양방향 데이터 연결을 실현합시다.
그런데 잠깐만, 나도 이 글 앞에서 Forms Module라는 것을 언급했어.저것은 무엇입니까?
명령어ngModel는 FormsModule라는 다른 모듈에 존재한다.만약 우리가 이 지령을 사용해야 한다면, 우리는 우리 모듈에 같은 지령을 가져와야 한다. (나는 곧 모듈을 상세하게 토론할 것이다.)
응용 프로그램을 엽니다.모듈ts 파일(아래와 같다) -

그림과 같이 두 줄을 추가합니다 -

import { FormsModule } from '@angular/forms';

 FormsModule

앞에 쉼표 넣는 거 잊지 마FormsModule구성 요소를 엽니다.html 파일 -

그리고 아래 코드를 붙여-

<input [(ngModel)]="myMarks" required />

{{ myMarks }}

myMarks 우리는 본문 앞에서 상응하는 TS 파일에 변수를 만들었다(그리고 그 값78).
따라서 응용 프로그램을 실행하고 브라우저로 이동합니다.아래 출력을 보실 수 있습니다 -

정말!변수 값 78이 입력 텍스트 상자로 설정되었습니다.
다른 78개는 플러그인 (이것은 단방향 귀속) 때문이다.
현재 텍스트 상자의 값을 95로 바꾸면 78도 95로 바뀌는 것을 볼 수 있다.
위젯이 표시되면 모델 값이 템플릿에 바인딩되고 템플릿 값이 변경될 때(텍스트 상자 사용) 모델이 변경됩니다.전체 과정은 양방향 데이터 귀속이다.
이거 신기하지 않아요?
왜 이런 변화가 일어났을까?텍스트 상자 값을 95로 업데이트하면 모델(변수myMarks도 95로 업데이트됩니다.모델이 업데이트되었기 때문에 삽입값myMarks도 업데이트됩니다.ngModel 엔진 덮개 아래의 이 큰 과정은 이렇게 순조롭다.
이것이 바로 내장 각도 속성 명령의 끝이다.
만약 당신이 이 댓글을 좋아한다면, 평론과 공유를 하세요.
다음은 구조 명령이다.
그러니까 계속 지켜봐 주세요.
건배!!!
즐거움 코드