Форум программистов и сисадминов Киберфорум - Блоги - Anna5194

Вывести из текстового файла “input.txt” в файл “output.txt” только четные по счету строки (нумерация с 1)

Anna5194 — Tue, 07 Feb 2023 21:28:42 GMT

Задача с универа. Если вдруг у преподавателя будут вопросы, мой ли это код, чтобы я могла его показать прямо на сайте. Так что, если у кого-то есть предложения, как этот код улучшить, пишите, с удовольствием почитаю. Код на С++.

C++
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// Вывести из текстового файла “input.txt” в файл “output.txt” только четные по счету строки (нумерация с 1).
//
 
#include 
#include 
#include 
#include 
 
int main()
{
    int count = 0;
    FILE *f1;
    char *str;
    str = (char*) calloc(1, 1);
    fopen_s(&f1,"input.txt", "r");
    FILE* f2;
    fopen_s(&f2, "output.txt", "w");
    while (!feof(f1))
    {
        fgets(str, 255, f1);
        for (int i = 0; i < strlen(str); i++)
        {
            if (str[i] == '\n') {
                count++;
                if (count % 2 == 0) {
                    fputs(str, f2);
                }
            }
        }
    }
    fclose(f1);
    fclose(f2);
    return 0;
}

Как сделать, чтобы раскрывающийся список НЕ закрывался

Anna5194 — Mon, 29 Jul 2019 11:21:03 GMT

Часто статьи о том, как сделать, чтобы раскрывающийся список или dropdown закрывался при клике на любую область. Но иногда возникает прямо противоположная проблема. Как сделать так, чтобы закрывающийся при нажатии на любую область список НЕ закрывался, а закрывался лишь при нажатии на кнопку, которая его активирует? Внизу будет html-код списка.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<div class="search-block__item" dropdown [autoClose]="false">
            <button id="button-autoclose" dropdownToggle type="button" class="btn dropdown-toggle">
                Количество комнат
                <span class="caret"></span>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    Выберите количество комнат:
                    <label ngbButtonLabel class="btn btn--border"
                    id="oneRoom" (click)="changeOneRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="1"> 1
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="twoRooms" (click)="changeTwoRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="2"> 2
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="threeRooms" (click)="changeThreeRoom(true)"
                     (click)="thisShowResetTwo(val)">
 
                        <input ngbButton type="checkbox" [value]="3"> 3
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="fourPlusRooms" (click)="changeFourPlusRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="4"
                         (click)="thisShowResetTwo(val)"> 4+
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisRoomReset()"
                    class="resetFormTwo" [ngClass]="{'showReset': showRTwo}">
                        <input ngbButton type="checkbox" [value]="10" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Х
                    </label>
                </div>
            </ul>
        </div>

Весь секрет расположен в самом начале кода. В div пишем [autoClose]="false", чтобы кликая на любую область мею не раскрывалось. А на кнопку, которая как раз таки и будет раскрывать наше меню, вешаем id="button-autoclose". Вот и всё)

Маршрутизация

Anna5194 — Thu, 25 Jul 2019 07:44:56 GMT

Итак, что я хочу рассказать и показать. Моей задачей было сделать меню. Как оно выглядит, я прикреплю скрин. Нужно было, чтобы при нажатии на "купить" или "аренда" [routerLink] менялся на "/kupit/kvartiru" или "/arenda/kvartiru". Дальше при нажатии и выборе последующих фильтров заполнялась строка [queryParams]. Моей проблемой было то, что [routerLink] сразу же переносит на выбранную страницу, а [queryParams] можно было выбрать только один. Так же была проблема с передачей данный от родительского компонента дочернему. Работаю на Ангуляре 7 с Бутстрапом 4. Решение я сейчас прикреплю ниже. Код родительского элемента:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import {Component, OnInit, ViewEncapsulation, Output} from "@angular/core";
import {BasicSaleFlate} from "../entity/BasicSaleFlate";
import {DomSanitizer, Meta, Title} from "@angular/platform-browser";
import {FlatService} from "../buy/flat/flat.service";
import {HttpParams} from "@angular/common/http";
import {RentFlatService} from "../rent/flat/rent.flat.service";
import {BaseFlat} from "../entity/BaseFlat";
import {Routes, RouterModule} from '@angular/router';
 
 
@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.less'],
  encapsulation: ViewEncapsulation.None
})
 
export class HomeComponent implements OnInit {
 
  private currentPage: number = 1;
  private pageSize: number = 3;
  flatList: BasicSaleFlate[];
  rentFlatList: BasicSaleFlate[];
  newBuildList: BasicSaleFlate[];
  kupit: any = '';
  arenda: any = '';
  buy: boolean;
  rent: boolean;
 
  constructor(private flatService: FlatService,
              private rentService: RentFlatService,
              private sanitizer: DomSanitizer,
              private _titleService: Title,
              private _metaService: Meta) {
  }
 
  ngOnInit(): void {
 
  }
 
  changeWayKvartiru(a){
    var b;
    switch(a){
      case 1:
          console.log("littlePebble", this.b);
          this.b = "/kupit/kvartiru";
          break;
      case 2:
          console.log("bePrepared", this.b);
          this.b = "/arenda/kvartiru";
          break;
      default:
          console.log("Hi", this.b);
          this.b = "непроканало";
          break;
    }
  }
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="home-teaser">
    <div class="home-teaser__img"></div>
    <div class="home-teaser__container container">
        <h1 class="home-teaser__title">Купить квартиру в Минске</h1>
        <div class="home-teaser__search search">
            type="pills">
                
                heading="Купить"
                (click)="changeWayKvartiru(1)"
                >
                    
                    [userB]="b">
                    </data-app-search-buy-flat>
                </tab>
                
                heading="Арендовать"
                (click)="changeWayKvartiru(2)"
                >
                    
                    [userB]="b">
                    </data-app-search-buy-flat>
                </tab>
            </tabset>
        </div>      
    </div>
</div>

А так же код дочернего компонента:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
import { Component, OnInit, ViewChild, ElementRef, HostListener, NgModule, Output, EventEmitter, Input } from '@angular/core';
import {Routes, RouterModule, Router, ActivatedRoute} from '@angular/router';
import { HttpClient, HttpParams, HttpClientModule } from '@angular/common/http';
import { b } from '@angular/core/src/render3';
 
@Component({
  selector: 'data-app-search-buy-flat',
  templateUrl: './search-buy-flat.component.html',
  styleUrls: ['./search-buy-flat.component.less']
})
 
export class SearchBuyFlatComponent implements OnInit {
  renderer: any;
  orderObj: any;
  
  model = 0;
  numberOfClicks = 0;
  numFrom: string = '';
  numTo: string = '';
 
  qp: any = '';
  qp1: any = '';
  qp2: any = '';
  qp3: any = '';
  qp4: any = '';
  // qp = this.qp1 + this.qp2 + this.qp3;
 
  @Input() userB: string;
  
  byeFlat = [{
    oldBuilding: null,
    newBuilding: null,
    oneRoom: null,
    twoRooms: null,
    threeRooms: null,
    fourPlusRooms: null,
    priceFrom: null,
    priceTo: null,
  }];
 
  rentFlat = [{
    oneRoom: null,
    twoRooms: null,
    threeRooms: null,
    fourPlusRooms: null,
    priceFrom: null,
    priceTo: null,
  }];
 
 
  constructor(
    private _router: Router,
    private http: HttpClient,
    private route: ActivatedRoute,
  ) { }
 
  
 
  ngOnInit() {
 
  }
 
    thisOldBuilding(val){
      this.byeFlat['oldBuilding'] = val;
      console.log("kimiNoNaWa",this.byeFlat[0]);
    }
 
    thisNewBuilding(val){
      this.byeFlat['newBuilding'] = val;
      console.log("kimiNoNaWa",this.byeFlat[1]);
    }
 
    thisBuildingReset(){
      this.byeFlat['oldBuilding'] = null;
      this.byeFlat['newBuilding'] = null;
      console.log("kimiNoNaWa",this.byeFlat[0], this.byeFlat[1]);
    }
 
    changeOneRoom(val){
      this.byeFlat['oneRoom'] = val;
      console.log("kimiNoNaWa",this.byeFlat[2]);
    }
 
    changeTwoRoom(val){
      this.byeFlat['twoRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[3]);
    }
 
    changeThreeRoom(val){
      this.byeFlat['threeRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[4]);
    }
 
    changeFourPlusRoom(val){
      this.byeFlat['fourPlusRooms'] = val;
      console.log("kimiNoNaWa",this.byeFlat[5]);
    }
    
    thisRoomReset(){
      this.byeFlat['oneRoom'] = null;
      this.byeFlat['twoRooms'] = null;
      this.byeFlat['threeRooms'] = null;
      this.byeFlat['fourPlusRooms'] = null;
      console.log("kimiNoNaWa",this.byeFlat[2],this.byeFlat[3],this.byeFlat[4],this.byeFlat[5]);
    }
 
    priceFrom(numFrom){
      this.byeFlat['priceFrom'] = numFrom;
      console.log("kimiNoNaWa",this.byeFlat[6]);
      // this.qp = {priceFrom: this.numFrom};
      // console.log("something",this.qp);
    }
 
    priceTo(numTo){
      this.byeFlat['priceTo'] = numTo;
      console.log("kimiNoNaWa",this.byeFlat[7]);
      // this.qp = {priceTo: this.numTo};
      // console.log("something",this.qp);
    }
 
 
    // @Output() onChanged = new EventEmitter(); 
    searchRentFlat() {
      // this.qp = this.qp1 + this.qp2;
      this._router.navigate(['/arenda/kvartiru'], { queryParams: HttpParams});
    }
    
    searchBuyFlat() {
      // this.qp = { newBuilding: true};
 
      this._router.navigate(['/kupit/kvartiru'], { queryParams: this.qp});
    }
 }

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<div class="search-block">
    <div class="search-block__content">
       
        
        <div class="search-block__item" dropdown>
            <button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
                    aria-controls="dropdown-basic">
                Тип квартиры
                <span class="caret"></span>
            </button>
            <div *dropdownMenu class="dropdown-menu">
                <p class="dropdown-menu__title">Выберите тип:</p>
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    <label ngbButtonLabel class="btn btn--border" (click)=" thisOldBuilding(true)"
                    id="oldBuilding" #oldBuilding
                    >
 
                        <input ngbButton type="radio" [value]="1" 
                        [(ngModel)]="old"> Вторичка
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisNewBuilding(true)"
                    id="newBuilding" #newBuilding
                    >
 
                        <input ngbButton type="radio" value="middle" 
                        
                        [(ngModel)]="new"> Новостройка
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisBuildingReset()"
                    >
                        <input ngbButton type="radio" value="2" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Очистить
                    </label>
                </div>
 
 
            </div>
        </div>
        <div class="search-block__item" dropdown>
            <button id="button-basic" dropdownToggle type="button" class="btn dropdown-toggle"
                    aria-controls="dropdown-basic">
                Количество комнат
                <span class="caret"></span>
            </button>
            <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
                role="menu" aria-labelledby="button-basic">
 
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    Выберите количество комнат:
                    <label ngbButtonLabel class="btn btn--border"
                    id="oneRoom" (click)="changeOneRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="1"> 1
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="twoRooms" (click)="changeTwoRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="2"> 2
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="threeRooms" (click)="changeThreeRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="3"> 3
                    </label>
                    <label ngbButtonLabel class="btn btn--border"
                    id="fourPlusRooms" (click)="changeFourPlusRoom(true)">
 
                        <input ngbButton type="checkbox" [value]="4"> 4+
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisRoomReset()">
                        <input ngbButton type="checkbox" [value]="10" 
                        id="resetFormBuilding" #resetFormBuilding
                        [(ngModel)]="reset"> Очистить
                    </label>
                </div>
            </ul>
        </div>
        <div class="search-block__item">
            <input type="number" [(ngModel)]="numFrom" class="input" placeholder="от"
            (change)="priceFrom(numFrom)">
        </div>
 
        <div class="search-block__item">
            <input type="number" [(ngModel)]="numTo" class="input" placeholder="до"
            (change)="priceTo(numTo)">
        </div>
 
    </div>
    <div>
 
        <button class="search-block__btn btn" 
        [routerLink]="userB" 
        [queryParams]="byeFlat"
        >Поиск</button>
    </div>
</div>

По итогу, все параметры [queryParams] я объединила в массив с изначальным значением null, который меняется на true или число в зависимости от клика или введённых данных. Вместо значения [routerLink] я вставила переменную, которая меняется в зависимости от остановки цикла. Таким образом, благодаря циклу, можно, кроме "купить" и "аренда" добавлять другие кнопки. Решение, по итогу, оказалось действительно простым. Другое дело, что я тупеньки и не смог сам до такого додуматься. Спасибо Роме. В интернете я ничего похожего не нашла, так что пользуйтесь на здоровье :3

как скачать любое изображение с любого сайта

Anna5194 — Mon, 17 Jun 2019 11:35:59 GMT

- заходите в инструменты разработчика нужного вам сайта;
- переходите во вкладку Sources;
- нажимаете Ctrl+P;
- перед вами список всех используемых на этом сайте картинок, да ещё и с поиском.

Просмотрела кучу сайтов, нигде не нашла нормальной инструкции, пока сама не разобралась. Спасибо, гугл-инструменты-разработчика с его новыми обновлениями!)))

Градиент

Anna5194 — Wed, 29 May 2019 10:35:26 GMT

Долго мучилась с градиентом и ангуляром, который не хотел видеть мой элемент. В итоге мне помогли найти решение. Боже, спасибо всем тем мидлам, что мне помогают. Ромочка, ты - лучший!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="home-developer">
  <div class='gradient' id="gradient" #gradient>
      
  <div class="grid" #content>
    <div class="home-info__item col--xlg-1-2 col--lg-1-2 col--md-1-2 col--sm-1-2 col--xs-1-1"
      *ngFor='let item of arrayList | slice:0:countCompany'>
      <div class="home-developer__logo">
        <img src="{{item.logo}}" alt="#">
      </div>
      <div class="home-developer__title">{{item.title}}</div>
      <p class="home-developer__rc">{{item.rc}}
        <span class="home-developer__price">{{item.price}}</span>
      </p>
      <br>
      <p class="home-developer__apart">{{item.apartments}}</p>
    </div>
 
    <div class="col--1-1">
      
      <div class="home-developer__more" id="buttonSwitch">
        <button class="home-developer__more-btn btn btn--yellow"
          (click)="showMore()">
          {{ isShowMoreCompanies ? 'Скрыть' : 'Показать ещё'}}
        </button>
      </div>
    </div>
  </div>
  </div>
  
</div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
import { Component, ElementRef, OnInit, HostListener, Directive, Renderer2, ViewChild } from '@angular/core';
 
 
@Component({
    selector: 'data-developer-block-card',
    templateUrl: './developer-block-card.html',
    styleUrls: ['./developer-block-card.less']
})
 
 
export class DeveloperBlockCard implements OnInit{
  // @ViewChild('content') Component :ElementRef;
  @ViewChild('gradient') gradientEl :ElementRef;
 
  // renderer: any;
  DoCheck;
  content: ElementRef;
  // gradient: ElementRef;
  showContent: ElementRef;
  numberOfClicks = 0;
  isShowMoreCompanies: boolean = false;
  isShowMore: boolean = true;
  button: ElementRef;
 
  arrayList: any = [
    {
      logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
      title: "ПИК",
      rc: "28 ЖК",
      price: "от 3,1 млн",
      apartments: "6 988 квартир",
    },
    {
      logo: "https://data1.logaster.com/logotype/data/5413158/png/512/1/?c=421366bd831202f9ce00d973cfed6ba3",
      title: "MR GROUP",
      rc: "13 ЖК",
      price: "от 5,9 млн",
      apartments: "3 067 кварти", 
    },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "Главстрой",
    //   rc: "1 ЖК",
    //   price: "от 3,8 млн",
    //   apartments: "1 266 квартир",
    // },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "ПИК",
    //   rc: "28 ЖК",
    //   price: "от 3,1 млн",
    //   apartments: "6 988 квартир",
    // },
    // {
    //   logo: "https://data1.logaster.com/logotype/data/5413158/png/512/1/?c=421366bd831202f9ce00d973cfed6ba3",
    //   title: "MR GROUP",
    //   rc: "13 ЖК",
    //   price: "от 5,9 млн",
    //   apartments: "3 067 кварти", 
    // },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "Главстрой",
    //   rc: "1 ЖК",
    //   price: "от 3,8 млн",
    //   apartments: "1 266 квартир",
    // },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "ПИК",
    //   rc: "28 ЖК",
    //   price: "от 3,1 млн",
    //   apartments: "6 988 квартир",
    // },
    // {
    //   logo: "https://data1.logaster.com/logotype/data/5413158/png/512/1/?c=421366bd831202f9ce00d973cfed6ba3",
    //   title: "MR GROUP",
    //   rc: "13 ЖК",
    //   price: "от 5,9 млн",
    //   apartments: "3 067 кварти", 
    // },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "Главстрой",
    //   rc: "1 ЖК",
    //   price: "от 3,8 млн",
    //   apartments: "1 266 квартир",
    // },
    // {
    //   logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
    //   title: "ПИК",
    //   rc: "28 ЖК",
    //   price: "от 3,1 млн",
    //   apartments: "6 988 квартир",
    // }
  ];
 
  arrayListOne: any = [
    {
      logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
      title: "ПИК",
      rc: "28 ЖК",
      price: "от 3,1 млн",
      apartments: "6 988 квартир",
    },
    {
      logo: "https://data1.logaster.com/logotype/data/5413158/png/512/1/?c=421366bd831202f9ce00d973cfed6ba3",
      title: "MR GROUP",
      rc: "13 ЖК",
      price: "от 5,9 млн",
      apartments: "3 067 кварти", 
    },
    {
      logo: "https://data2.logaster.com/logotype/data/5410523/png/512/1/?c=b03e679a8687b207dbec72112b999b3e",
      title: "Главстрой",
      rc: "1 ЖК",
      price: "от 3,8 млн",
      apartments: "1 266 квартир",
    },
  ]
  countCompany: number;
  
  constructor(
    private renderer: Renderer2,
    private elementRef: ElementRef
    ){}
 
  ngOnInit(): void {
    let button = document.getElementById('buttonSwitch');
    let gradient = document.getElementById('gradient');
 
    if(this.arrayList.length > 4){
      this.countCompany = 4;
    }
    else{
      this.countCompany = this.arrayList.length;
      this.renderer.addClass(this.gradientEl.nativeElement, 'not');
      // button.style.display = 'none';
      // gradient.className = 'not';
    }
  }
 
  showMore(){
    let gradient = document.getElementById('gradient');
    let content = document.getElementById('content');
 
    if(!this.isShowMoreCompanies){
      this.countCompany = this.arrayList.length;
      this.renderer.addClass(this.gradientEl.nativeElement, 'not');
      // content.style.backgroundColor = "blue";
      // gradient.style.content = 'none';
      // gradient.addClass('not');
      // gradient.className = "gradientPresent";
    }
    else{
      this.countCompany = 4;
      this.renderer.removeClass(this.gradientEl.nativeElement, 'not');
      // content.style.backgroundColor = "red";
      // gradient.style.className = 'present';   
    }
 
    this.isShowMoreCompanies = !this.isShowMoreCompanies;
   
  }
  
 
  showMoreCompanies(){
    this.isShowMoreCompanies = !this.isShowMoreCompanies;
    console.log(this.isShowMoreCompanies);
    let content = document.getElementById('content');
    let gradient = document.getElementById('gradient');
    let button = document.getElementById('buttonDown');
 
    if(this.isShowMoreCompanies){
      // content.style.height = '300px';
      // gradient.style.display = 'block';
      // button.style.bottom = '1315px';
      // this.renderer.nativeElement.addClass(content, 'active');
      
    }
    else{
      // content.style.height = '100%';
      // gradient.style.display = 'none';
      // button.style.bottom = '1315px';
      // this.renderer.nativeElement.removeClass(content, 'active');
      
    }
  }
  
  ngDoCheck(): void {
    //Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.
    //Add 'implements DoCheck' to the class.
    
  }
 
  // @HostListener("click") onClick(){
  //   this.isShowMoreCompanies = !this.isShowMoreCompanies;
  //   if(this.isShowMoreCompanies){
  //     console.log("lalalend");
  //   }
  //   else{
  //     console.log('nani');
  //   }
  // }
  
}

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
.home-developer.active{
    overflow: hidden;
}
 
// .home-developer__parent{
//     position: relative;
//     // display: flex;
//     // flex-wrap: wrap;
// }
 
// .home-developer.panel.m--t{
//     background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 100%);
// }
 
.home-developer{
    // background: linear-gradient(to bottom, rgb(223, 12, 12) 0%,rgba(255,255,255,0) 100%);
    height: 100px;;
    width: 100%;
    display: inline;
    flex-wrap: wrap;
    // margin-right: 0;
    // grid-template-columns: repeat(5, 100%);
    // grid-auto-rows: 50px;
    overflow: hidden;
 
    // .home-info__item{
    //     z-index: 1;
    // }
    .grid{
        overflow: hidden;
        height: 100%;
    }
    .gradient{
        display: block;
        width:100%;
        margin:20px auto;
        cursor:text;
        // box-shadow:inset 0px -190px 190px -50px #add7f8;
        // max-height:100px;
        overflow:hidden;
        // background-image:linear-gradient(to bottom, transparent, red 100%);
        z-index: 2;
        // margin-top:-20px;
 
        &::after{
            content:"";
            display:block;
            height:50px;
            position:relative;
            bottom:110px;
            background-image:linear-gradient(to bottom, transparent, white 100%);
        }
            
    }
 
    .gradient.not{
        &::after{
        background-image:linear-gradient(to bottom, transparent, transparent 100%);
    }
    }
    
    // .gradientPresent{
    //     &::after{
    //     background-image:linear-gradient(to bottom, transparent, green 100%);
    // }
    // }
    
 
    .home-info__item{
        padding-top: 15px;
        padding-bottom: 15px;
        height: 75px;
        border-bottom: 1px solid grey;
    }
 
    & &__logo{
        // grid-column-start: 1;
        // grid-column-end: 1;
        // grid-row-start: 1;
        // grid-row-end: 3;
        float: left;
        width: 45px;
        height: 45px;
        background-color: aquamarine;
        background: no-repeat center center;
        border: 1px solid grey;
        vertical-align: middle;
        margin-right: 30px;
        font-weight: 900;
        
    }
 
    & &__title{
        // grid-column-start: 2;
        // grid-column-end: 4;
        // grid-row-start: 1;
        // grid-row-end: 3;
        float: left;
        margin-top: 15px;
        vertical-align: middle;
        font-weight: 900;
 
    }
 
    & &__rc{
        // grid-column-start: 4;
        // grid-column-end: 4;
        // grid-row-start: 1;
        // grid-row-end: 2;
        float: right;
        top: 0;
        color: aquamarine;
 
    }
 
    & &__price{
        // grid-column-start: 5;
        // grid-column-end: 5;
        // grid-row-start: 2;
        // grid-row-end: 3;
        color: black;
        float: right;
        top: 0;
        margin-left: 20px;
 
    }
 
    & &__apart{
        // margin-top: 30px;
        // grid-column-start: 4;
        // grid-column-end: 4;
        // grid-row-start: 3;
        // grid-row-end: 3;
        float: right;
        // width: 20%;
        margin-top: 10px;
        // margin-right: -100px;
        // margin-bottom: 30px;
        right: 0;
        bottom: 0;
        color: grey;
        text-align: right;
        vertical-align: bottom;
 
    }
 
    // & &__parent{
    //     padding-top: 15px;
    //     padding-bottom: 15px;
    //     height: 75px;
    //     border-bottom: 1px solid grey;
    // }
 
    // & &__margin-block{
    //     margin-top: 50px;
    // }
 
    & &__more{
        position: relative;
        margin-top: 20px;
        text-align: center;
 
        &-btn{
            min-width: 200px;
        }
    }
    
    // & &__button{
    //     cursor: pointer;
    //     bottom: 0;
    //     left: 0;
    //     position: absolute;
    //     height: 40px;
    //     width: 150px;
    //     background-color: gold;
    //     border-radius: 5px;
    //     color: grey;
    //     font-weight: 700;
    //     margin-top: 5px;
    //     z-index: 10;
    //     margin-left: 20px;
    //     margin-bottom: 20px;
    // }
}

зачем нужен viewchild?

Anna5194 — Wed, 10 Apr 2019 08:30:42 GMT

Поняла для себя. Допустим, вы хотите как-то использовать какой-нибудь div в ангуляре, но для этого его нужно как-то вызывать. Вы называете его, допустим,

HTML5
1
div class="menu" #menuBlock </div>

, обязательно с "#". Теперь с помощью ViewChild его нужно привязать к ангуляру, что-то по типу такого

JavaScript
1
@ViewChild("menuBlock", {read: ElementRef}) menuBlock: ElementRef

. ТАДААААМ! Теперь вы можете вытворять с этим div-ом что хотите)))