The change of the variable cannot be displayed in the template through the two-way binding of the variable in the component of the form. -sharpangular - Codes Helper - Programming Question Answer

The change of the variable cannot be displayed in the template through the two-way binding of the variable in the component of the form. -sharpangular

I want to dynamically display the next form by changing the value of isDataRequest, but the actual isDataRequest value will change, but the template will not change. The value of each change is stored through subject, and then subscribed in the template, so that the template will be displayed dynamically. Why is it useless to bind variables directly? for details, please see stackblitz

.

<nz-form-item class="dct-col-24">
              <nz-form-label nzSpan="8"></nz-form-label>
              <nz-form-control nzSpan="16">
                <nz-radio-group [(ngModel)]="isDataRequest" (ngModelChange)="testChange($event)">
                  <label nz-radio nzValue="0"></label>
                  <label nz-radio nzValue="1"></label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
              <nz-form-item class="dct-col-24" *ngIf="!isDataRequest">
                <nz-form-label nzSpan="8"></nz-form-label>
                <nz-form-control nzSpan="16">
                  <nz-select nzAllowClear [(ngModel)]="defaultValue">
                    <nz-option [nzLabel]=""test1"" [nzValue]="1">
                    </nz-option>
                    <nz-option [nzLabel]=""test2"" [nzValue]="2">
                    </nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>

              <nz-form-item class="dct-col-24" *ngIf="isDataRequest">
                <nz-form-label nzSpan="8"></nz-form-label>
                <nz-form-control nzSpan="16">
                  <input nz-input [(ngModel)]="defaultValue">
                </nz-form-control>
              </nz-form-item>

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Jun.11,2021

because the judgment problem here * ngIf= "! isDataRequest"
selects this < label nz-radio nzValue= "0" > default value < / label >, that is, nzValue= "0". Note that at this time isDataRequest ='0' , it is string 0, not the number 0 . Here you can do an experiment, set isDataRequest = 0 in ts, and see if the page selects the 'default' option, and then isDataRequest = '0values. Take a look at the page again.

The result of

!'0' (! isDataRequest) is false, so your form will always show input, instead of select.

Previous: Huawei mobile phone installation we developed app prompt signature error

Next: When the page content is printed with the Echars chart, the chart does not display

What's the difference between establishing a class and an interface in angular?
What s the difference between creating a class and an interface in angular? What s the difference between defining variables in constructor? export class Hero { id: number; name: string; } export class Hero { constructor () public id: number, pu...

Angular5

Feb.26,2021
How does the page get back to the top when angular5 routes switch?
when using routing to switch pages, such as A page to B page, if the A page scrolls down, the B page is also scrolling distance when it is routed to B, how to get back to the top of the page each time you switch ...

Angular5

Feb.26,2021
How do I cancel uploading files when angularjs uses http post to upload files?
1. When uploading a large file using angular$http, the upload needs to be terminated halfway. How to achieve this? ...

Angularjs javascript

Feb.26,2021
Can angular @ Input parent components trigger events within child components by passing values to child components?
I use @ Input to define the value @ Input () product:ProductModel; within the subcomponent. then change the product value when the parent component triggers the event and pass it to the child component < details_main [product] = "product " > < de...

Angular4 angular2

Feb.26,2021
About angular subscribe err
I saw an example in the angular service subscribe: this.xxService.readBook().subscribe( (data) =>{ console.log(data)}, (err) => { console.log(err) ) is there any other data in subcribe besides data and err? is the order data first and then err...

Angular5

Feb.26,2021
Is it necessary to set the return value of the function in Angular?
such as getHeroes (): Observable < Hero [] > { return this.http.get < Hero [] > (this.heroesUrl) } can I just write it this way? getHeroes () { return this.http.get < Hero [] > (this.heroesUrl) } is it necessary to give < Hero [] > after get...

Angular5

Feb.26,2021
How to listen in angular4 * whether the ngFor has finished traversing
< html > <ion-list> <ion-item *ngFor= let i of list >< ion-item> < ion-list> < html > how do I listen to whether ngFof has finished traversing this array? ...

Html javascript ionic angular4

Feb.27,2021
The root module in Angularjs2 imports the feature module, how to import the route of the feature module as a child route of the root module route?
recently encountered in the development of the problem, the root module in the import of sub-modules, sub-module routing will extend the root module routing. but root module routing and submodule routing are peer-to-peer. the following is the root mo...

Angular2

Feb.27,2021
Require fs module in the project, using webpack, but always reporting errors?
require the fs module in the front-end project, but keep reporting errors? fs.readFileSync is not a function introduce code var fs = require( fs ); fs.readFileSync( index.html , utf8 ); this is the webpack configuration file const path = re...

Angularjs webpack

Feb.27,2021
Angular control ng2-date-picker date initialization error.
https: stackblitz.com edit n. use ng2-date-picker to see why date values are incorrectly formatted when initialized to a ng-datepicker control. is automatically converted to utc format. ...

Datepicker angular4

Feb.27,2021
Looking for a tool that can debug ng2!
find a tool that can debug ng2! it is difficult to debug, especially when debugging UI libraries ...

Angular4 angular2

Feb.28,2021
Find a simple ng2 http request method?
A rookie gets started and asks for a simple ng2 http request method I hope you can list the modules and introduced variables for me. Thank you . ...

Angular4 angular2

Feb.28,2021
How does vscode automatically complete the introduction module?
as shown in the picture, can t it be automatically completed and introduced? Do you want to use any plug-ins. ...

Angular2 visual-studio-code

Feb.28,2021
Written by jq used in angular2, click events should be added to append's div, but dynamically added div cannot bind events. How to solve this problem?
$( "- sharpsel ") .blur (function () { $("-sharpitems").css({ "display": "none" }) $( input[type="checkbox"]:checked ).each(function (elementId) { a....

Angular2

Feb.28,2021
It is invalid to use ng server to start other people's access in the local area network in the angular4 project.
after using ng server in angular4 project, you can open it locally with localhost:4200. In the local area network, others can t access my project with my local area network address. ...

Lan angular4 server

Feb.28,2021
Injection error in angularjs?
there is nothing wrong with the module name and the controller name. Why did you report an error? I tried for a long time but failed to solve it. There is a rookie at the front end. Please give me a lot of advice. as shown in the figure, the page repo...

Front-end angularjs

Feb.28,2021
Angularjs5 uses Angular CLI to build projects that introduce WebStrom bootstrap and angularjs without syntax hints
1.Angularjs5. Using Angular CLI to build a project to introduce bootstrap,WebStrom bootstrap and angularjs is not prompted. Angularjs has this prompt that the plug-in angularjs has been installed, but the ng- syntax seems to have no hint, and bootStrap ...

Javascript webstorm angularjs

Feb.28,2021
How can httpParams quickly add parameters?
the method of adding parameter content to httpParams. The official way to write it is: const httpParams = new HttpParams().set(key,value).set(key,value).set(key.value); if you want to add multiple parameters, you have to keep .set (), which feels tro...

Angular5

Feb.28,2021
The angular-cli project execution ng serve, shows that the compilation was successful, but why is the browser a blank page?
do I have the wrong environment, Mom? Node and cli have been uninstalled and reinstalled several times, but they are still the same. Sorry, I don t know how to take screenshots on my phone. I hope those who have encountered similar situations can remind...

Angularjs

Feb.28,2021
Ionic3 in the browser with the browser back button does not return animation
when testing in the browser, using the back button that comes with the browser does not return the animation. I remember that there are all ionic1. I don t know how to solve it. ...

Ionic angular5

Feb.28,2021

Menu